HighlightJS - How to show some code safely?

In our job, it can be really useful to expose a bloc of code without execute it. Generally, we can use Markdown or some Wiki to do it. But sometimes, we want to use it on a website.

And in this case, HighlightJS is our savior!

What is HighlightJS?

It's a JavaScript syntax highlighter with language auto-detection and zero dependencies.

And currently 192 languages and 242 styles are implemented!

example

How to use it?

Once you've installed it (with NodeJS or basic JavaScript import), put some pre/code (Example just below) blocks with our code to show and that's it!

<pre>
  <code>
    ...
  </code>
</pre>

Otherwise, you can define which language to highlight

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

or add a class to ignore some blocks.

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

Their documentation is quite complete, so go check it if you want more informations!

Links

• HighlightJS website : https://highlightjs.org/

I hope it will help you ! 🍺