DEV Community

Maxime Guilbert
Maxime Guilbert

Posted on • Updated on

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!


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!

Enter fullscreen mode Exit fullscreen mode

Otherwise, you can define which language to highlight

<pre><code class="language-html">...</code></pre>
Enter fullscreen mode Exit fullscreen mode

or add a class to ignore some blocks.

<pre><code class="nohighlight">...</code></pre>
Enter fullscreen mode Exit fullscreen mode

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


I hope it will help you ! 🍺

Top comments (0)