DEV Community

Maxime Guilbert
Maxime Guilbert

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

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


Links


I hope it will help you ! 🍺

Discussion (0)