How to syntax highlight code blocks in your blog or website

What is highlight.js ?

Highlight JS is a Syntax highlighting library for the Web. It is a lightweight library with following features:

• Supports 196 languages and 242 styles
• Automatic language detection
• Multi-language code highlighting
• Works with any markup
• Compatible with any JS framework

How to use highlight.js ?

The bare minimum for using highlight.js on a web page is linking to the library along with one of the themes and calling highlightAll().

A prebuilt version of highlight.js with 34 commonly used languages is hosted by following CDNs.

Add the css to your page

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css" >

Add the js to your page

<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>

Add the your code snippet inside ‘pre’ and ‘code’ tag

<pre> 
   <code class="language-javascript" >
      const [loading,setLoading] = React.useState(false);
      getData = () => {
          // get the data from api
      }
   </code>
</pre>

As I mentioned above Highlight JS can automatically detect the language but can you specify the language explicitly by adding the class name “language-{language}” i.e class=“language-html” , class=“language-json” .

Finally Call the highlightAll() function

<script>  hljs.highlightAll(); </script>

The result will be something like this (your output’s theme might not match my result)

const [loading,setLoading] = React.useState(false);

getData = () => {
    // get the data from api
 }

Link to Official Highlight JS page
highlight.js