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 ! 🍺