Syntax highlighting makes your code look pretty and also helps you identify errors quickly. In this article, we will show you how to syntax highlight your code using the JavaScript library, highlight.js.
Getting Started
To get started, simply include the following code in your HTML document under <head> tag.
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/androidstudio.min.css"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'></script>
This will load the HighlightJS library onto your page. Next, we need to add a few lines of JavaScript to enable syntax highlighting:
You'll need to add the following code to the </body> tag.
<script>
hljs.highlightAll();
</script>
How to Highlight Code Syntax
There are several ways that you can highlight code syntax in your blog post or website. One easy way is to use the <pre> and <code> tags. This will cause all the text within it to be highlighted automatically.
In the <code> tag, we need to specify the language of the code snippet like below. The class attributes tell highlight.js that the code snippet is JavaScript.
<pre><code class="javascript>
// program to check if the number is even or odd
// take input from the user
const number = prompt("Enter a number: ");
//check if the number is even
if(number % 2 == 0) {
console.log("The number is even.");
}
// if the number is odd
else {
console.log("The number is odd.");
}
</code></pre>
// program to check if the number is even or odd
// take input from the user
const number = prompt("Enter a number: ");
//check if the number is even
if(number % 2 == 0) {
console.log("The number is even.");
}
// if the number is odd
else {
console.log("The number is odd.");
}In this example, we are telling HighlightJS that our code is written in JavaScript and we want it to be highlighted accordingly. You can find more information on all of the available options on the HighlightJS website. Now that we have enabled syntax highlighting, let's take a look at an example of some code:
public class Main {
public static void main(String[] args) {
int n1 = 72, n2 = 120, lcm;
// maximum number between n1 and n2 is stored in lcm
lcm = (n1 > n2) ? n1 : n2;
// Always true
while (true) {
if (lcm % n1 == 0 && lcm % n2 == 0) {
System.out.printf("The LCM of %d and %d is %d.", n1, n2, lcm);
break;
}
++lcm;
}
}
}
As you can see, our code has been highlighted with different colors according to its type (e.g., keywords, variables etc.). Clearly, it makes reading and understanding the code much easier.
How to change Code Snippet theme?
The HighlightJS library has a bunch of themes for code snippets. Our example below uses the androidstudio theme, and you will see the CSS file we have defined inside our <head> tags loads the androidstudio.min.css file.
To change the theme simply change the CSS file name in the link tags. You can get all theme CSS links in CDN highlitght.js
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/arduino-light.min.css"/>
How to Change Theme Dynamically using JavaScript?
If you wish to change the code snippet theme based on dark/white mode, you can do that simply by changing the CSS stylesheet <link> href in the HTML.
First set the ID to the <link> tag which loads the highlight.js theme file like below.
<link id="highlightTheme" rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/androidstudio.min.css"/>Here we have set ID to highlightTheme
Now write a JavaScript function to change the stylesheet href dynamically based on mode change.
We are getting the current Href value by using document.getElementById('highlightTheme') where highlightTheme is the ID we have defined for our <link> tag above.
Here I'm checking if the current theme link is a dark CSS file.
If yes, then change the href link to point to the white theme CSS file otherwise point to the dark theme CSS file.
function changeTheme() {
currentTheme = document.getElementById('highlightTheme').href;
console.log(currentTheme)
if (currentTheme == 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/androidstudio.min.css') {
console.log('1');
document.getElementById('highlightTheme').href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/arduino-light.min.css';
} else {
console.log('2');
document.getElementById('highlightTheme').href = 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/androidstudio.min.css';
}
}