Most bloggers highlight code snippets to make their blog more readable, professional, and beautiful. There are many ways to do this. One famous and easy way is by using the highlight.js library. Some advantages are:
- highlight.js automatically detects the language.
- All famous languages are supported.
Adding highlight.js to your Blog to Highlight Code
First, you have to choose a theme. Go to this demo page and choose a style you like. Then, visit Highlight JS CDNJS repository and find
yourthemename.min.css and copy the link. Make sure to select the latest version.
Then, go to your blog’s source code and place the code inside the
<link rel="stylesheet" href="COPIED_URL" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.10/styles/docco.min.css" />
Then, from the same repository, copy the link of the
highlight.min.js file. Add the following code before the
Finally, add the following code after the above code.
This will highlight all the
<pre><code> blocks in your blog at the initial load. Highlight.js will automatically detect the language. However, if you are not satisfied with that, you can add a class to the code block to set the language.
That’s all! Adding highlight.js to your blog is as simple as that. It just takes a few minutes.
Thank you for reading. If you have any questions, comment below.