Syntax highlighting for fenced code #299

New Issue

claunia · 2026-01-29T14:33:07Z

claunia commented

2026-01-29 14:33:07 +00:00

Originally created by @LukeTOBrien on GitHub (Jun 4, 2019).

Hello there,

I saw (Any chance of getting syntax highlighting?) #1 and I have been looking for the same thing for my project, so I thought I would open a new issue.

In my project I am basically creating a product that will help teach programming, so syntax highlighting is very important.
In the old days I used to copy n paste from Visual Studio into PowerPoint to get the highlighting, then I move to web presentations using HighlightJs.

When I type a peice of fenced code I would like to be able to specify the language and for CSS classes to be added that would change the style of the code.
For eg:

    ```javascript
    ...
    ```

Would be something like this (using Highligh.js):

<pre>
    <code class="javascript">...</code>
</pre>

Then I could init Higlight.js on the client-side

...

I was previously using Markdown-it that has a highlight function this is I guess using the highlight.js API.
I was going to experiment using EdgeJs to run a Node function and do the highlighting server-side in a custom renderer.

Whatya think?

Originally created by @LukeTOBrien on GitHub (Jun 4, 2019). Hello there, I saw (Any chance of getting syntax highlighting?) #1 and I have been looking for the same thing for my project, so I thought I would open a new issue. In my project I am basically creating a product that will help teach programming, so syntax highlighting is very important. In the old days I used to copy n paste from Visual Studio into PowerPoint to get the highlighting, then I move to web presentations using [HighlightJs](https://highlightjs.org/). When I type a peice of fenced code I would like to be able to specify the language and for CSS classes to be added that would change the style of the code. For eg: ```markdown ```javascript ... ``` ``` Would be something like this (using [Highligh.js](https://highlightjs.org/)): ```html <pre> <code class="javascript">...</code> </pre> ``` Then I could init Higlight.js on the client-side ... I was previously using Markdown-it that has a [highlight function](https://github.com/markdown-it/markdown-it#syntax-highlighting) this is I guess using the [highlight.js API](https://highlightjs.readthedocs.io/en/latest/index.html). I was going to experiment using [EdgeJs](https://github.com/tjanczuk/edge) to run a Node function and do the highlighting server-side in a custom renderer. Whatya think?

claunia added the question label 2026-01-29 14:33:07 +00:00

claunia closed this issue

2026-01-29 14:33:08 +00:00

claunia commented

2026-01-29 14:33:08 +00:00

@xoofx commented on GitHub (Jun 4, 2019):

Markdig is generating the following (see on babelmark):

<pre>
  <code class="language-javascript">...
</code>
</pre>

If you want to generate something different, you just need to write a simple extension that will replace FencedCodeBlockParser with your own, by inheriting from it and set in the constructor InfoPrefix = string.Empty

I don't remember why the prefix was part of the parser though (should have been more a renderer thing)

@xoofx commented on GitHub (Jun 4, 2019): Markdig is generating the following (see on [babelmark](https://babelmark.github.io/?text=%60%60%60javascript%0A...%0A%60%60%60)): ``` <pre> <code class="language-javascript">... </code> </pre> ``` If you want to generate something different, you just need to write a simple extension that will replace `FencedCodeBlockParser` with your own, by inheriting from it and set in the constructor `InfoPrefix = string.Empty` I don't remember why the prefix was part of the parser though (should have been more a renderer thing)

claunia commented

2026-01-29 14:33:09 +00:00

@MihaZupan commented on GitHub (Jun 20, 2019):

Looks like it is also exposed as a property on the parser

var builder = new MarkdownPipelineBuilder()
    .UseAdvancedExtensions();

builder.BlockParsers.FindExact<FencedCodeBlockParser>().InfoPrefix = "";

var pipeline = builder.Build();

@MihaZupan commented on GitHub (Jun 20, 2019): Looks like it is also exposed as a property on the parser ```c# var builder = new MarkdownPipelineBuilder() .UseAdvancedExtensions(); builder.BlockParsers.FindExact<FencedCodeBlockParser>().InfoPrefix = ""; var pipeline = builder.Build(); ```

claunia commented

2026-01-29 14:33:09 +00:00

@LukeTOBrien commented on GitHub (Jun 20, 2019):

Ahh okay thanks, I will try this out.

Highlight.js will run on the client-side to do the syntax highlighting... I
don't suppose there's a way to do syntax highlighting on the server-side?
I will experiment with Edge.js to see if I can.

On Thu, Jun 20, 2019 at 3:48 PM Miha Zupan notifications@github.com wrote:

Looks like it is also exposed as a property on the parser

var builder = new MarkdownPipelineBuilder()
.UseAdvancedExtensions();
builder.BlockParsers.FindExact().InfoPrefix = "";
var pipeline = builder.Build();

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/lunet-io/markdig/issues/345?email_source=notifications&email_token=AD3KMFJ4VNXYDWNJO7EEL3LP3OKFTA5CNFSM4HS4DVZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYFUQ3I#issuecomment-504055917,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AD3KMFPVJKQSW3RXCEMBXMLP3OKFTANCNFSM4HS4DVZQ
.

@LukeTOBrien commented on GitHub (Jun 20, 2019): Ahh okay thanks, I will try this out. Highlight.js will run on the client-side to do the syntax highlighting... I don't suppose there's a way to do syntax highlighting on the server-side? I will experiment with Edge.js to see if I can. On Thu, Jun 20, 2019 at 3:48 PM Miha Zupan <notifications@github.com> wrote: > Looks like it is also exposed as a property on the parser > > var builder = new MarkdownPipelineBuilder() > .UseAdvancedExtensions(); > builder.BlockParsers.FindExact<FencedCodeBlockParser>().InfoPrefix = ""; > var pipeline = builder.Build(); > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <https://github.com/lunet-io/markdig/issues/345?email_source=notifications&email_token=AD3KMFJ4VNXYDWNJO7EEL3LP3OKFTA5CNFSM4HS4DVZ2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODYFUQ3I#issuecomment-504055917>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AD3KMFPVJKQSW3RXCEMBXMLP3OKFTANCNFSM4HS4DVZQ> > . >

claunia commented

2026-01-29 14:33:09 +00:00

@rclabo commented on GitHub (Jun 20, 2019):

I looked into doing syntax highlighting server-side a few months ago by using the https://www.nuget.org/packages/Pek.Markdig.HighlightJs/ Markdig plugin and eventually got it working kind of. But it relies on Jurassic, and Jurassic kept throwing exceptions when my tests were running. So, finally I abandoned that approach and switched to doing the syntax coloring totally front-side in the javascript after markdig returned the html. And for that I ultimately used https://github.com/google/code-prettify which I found to be very easy to implement. I hope sharing my experience in this area is helpful to you as you figure out the approach you want to take.

@rclabo commented on GitHub (Jun 20, 2019): I looked into doing syntax highlighting server-side a few months ago by using the https://www.nuget.org/packages/Pek.Markdig.HighlightJs/ Markdig plugin and eventually got it working kind of. But it relies on Jurassic, and Jurassic kept throwing exceptions when my tests were running. So, finally I abandoned that approach and switched to doing the syntax coloring totally front-side in the javascript after markdig returned the html. And for that I ultimately used https://github.com/google/code-prettify which I found to be very easy to implement. I hope sharing my experience in this area is helpful to you as you figure out the approach you want to take.

claunia commented

2026-01-29 14:33:10 +00:00

@LukeTOBrien commented on GitHub (Jun 29, 2019):

Yep I've come to the same conclusion... Perhaps oneday I will work on a dependany free extension using Highlight.js for now though I will just do it client-side.

I did try using Edge.js however the project is old and doesn't support .Net Core.

Thanks I'll close the issue... Although I think this would make a lovely enhancement for sometime in the future.

@LukeTOBrien commented on GitHub (Jun 29, 2019): Yep I've come to the same conclusion... Perhaps oneday I will work on a dependany free extension using [Highlight.js](https://highlightjs.org/) for now though I will just do it client-side. I did try using [Edge.js](https://github.com/tjanczuk/edge) however the project is old and doesn't support .Net Core. Thanks I'll close the issue... Although I think this would make a lovely enhancement for sometime in the future.

claunia commented

2026-01-29 14:33:11 +00:00

@ahmedkamalio commented on GitHub (Feb 25, 2020):

Hi @LukeTOBrien, referring to the highlighjs repo

Classes may also be prefixed with either language- or lang-.

which means that it should work just fine with the default output of markdig

@ahmedkamalio commented on GitHub (Feb 25, 2020): Hi @LukeTOBrien, referring to the [highlighjs repo](https://github.com/highlightjs/highlight.js/#getting-started) > Classes may also be prefixed with either `language-` or `lang-`. which means that it should work just fine with the default output of `markdig`

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/markdig#299