Parse markdown to HTML and highlight code syntax

Question

I've downloaded a Markdown JS library but I don't know if it supports syntax highlighting, or any of his two supported dialects (gruber/maruku), because its the first time I try to add markdown support to my webpages. So, I would like to know how to integrate a syntax highlighter (like Alex Gorbatchev's JS library) to markdown.

Any other libraries are welcome. Basically, my Markdown snippets are in .md files loaded that way:

<div class="markdown-f">
   <?= file_get_contents("file.md"); ?>
</div>

and it contains code snippets together with common Markdown text. I need a JS library to be able of doing something like:

<script>
   $('.markdown-f').each(function() {
        var contents = $(this).text();
        $(this).empty();
        contents = markdown.toHTML(contents);
        $(this).text(contents);
   });
</script>

with a dialect or any other hacktrick supporting syntax highlighting (specifying manually the target language for example).

Jared Beach · Accepted Answer · 2016-11-14 14:07:11Z

1

I've used that markdown parser on my website to display the README files of repos I've created. It wraps code blocks in <pre><code> code goes here </code></pre>

It does not use highlighting, but you could then use the other library you mentioned after calling:

$("code").addClass("brush: js") // assuming you want to highlight javascript

answered Nov 14, 2016 at 14:07

Jared Beach

3,20941 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ABu Over a year ago

What if I have different snippets in different languages?

Jared Beach Over a year ago

Then the javascript for adding the class will have to be tailored to the different markdown files.

Jared Beach Over a year ago

For example: $($("code")[0]).addClass("brush: js"); $($("code")[1]).addClass("brush: py");

ABu · Accepted Answer · 2016-11-14 16:08:53Z

1

Finally I used highlightjs.

The @A.OzanEkici solution has the (little) downside that I lost the markdown highglighting of my text editor (the emacs's markdown-mode), since the contents inside the <pre> tag must be un-indent to don't see the indention in the rendered page, and the @JaredBeach doesn't work either because Alex Gorbatchev's library only work on <pre> tags, not on <pre><code> tags, which is what is replaced by the markdown syntax.

So, my solution was simply:

<script>
   $('.markdown-f').each(function(){
      $(this).html(markdown.toHTML($(this).text()));
   });

   hljs.initHighlightingOnLoad();
</script>

And that has the adventage that the language is automatically detected.

answered Nov 14, 2016 at 16:08

ABu

12.5k8 gold badges62 silver badges125 bronze badges

Comments

Qsprec · Accepted Answer · 2016-11-14 14:08:09Z

0

I use Alex Gorbatchev's JS library to do this and it works great.

First you should create a <pre> element like this;

<pre class="brush: __yourFileType__"> + data + </pre>

data refers to your contents and __yourFileType__ can be one of these .

Ex: class="brush: xml" , class="brush: txt"

After that you just simply call it;

SyntaxHighlighter.highlight();

edited Nov 14, 2016 at 14:08

answered Nov 14, 2016 at 14:01

Qsprec

2753 silver badges11 bronze badges

3 Comments

ABu Over a year ago

But can I insert html elements inside a markdown text? And in that case I cannot use the indent syntax to specify code blocks isn't it?

Qsprec Over a year ago

Of course you can insert html elements. @Peregring-lk

Qsprec Over a year ago

@Peregring-lk You can see an example here .

Collectives™ on Stack Overflow

Parse markdown to HTML and highlight code syntax

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related