How to display code on a website with highlight.js and the `<pre>` tag

Last week I launched Technical Ninja, a web app for developers to practice answering technical questions during their interviews.

Hundreds of you tried the app and asked me to add new quizzes, new features, and I thank you for that!

One of the features I recently added is the ability to display pieces of code in the questions, in order to write more complex statements.

My three criteria were to display code in a dark theme, indented and with the corresponding syntax highlighting.

Today I'm going to explain how I managed to produce this result thanks to the highlight.js library and a little bit of html and css code!

Syntax highlighting with Highlight.js

The principle of this library is to take a string, and pass it through a parser in order to separate the pieces of code with the goal of coloring them differently.

The strength of highlight.js lies in two points:

• A very large number of supported languages (and even extensible thanks to modules)
• Many different color themes ranging from light to dark

How it works

You can check out the library's documentation available at: https://highlightjs.org/usage/ but I'll quickly show you the method I used!

We start by installing the library

npm i highlight.js --save

Then we prepare our html template (the hljs class enables highlight.js's default style)

<div id="code" class="hljs">
    <!-- Colored code goes here -->
</div>

Then we import the library, as well as the stylesheet of the theme we prefer, we run the highlight function and insert the result into our template.

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

const colored\_code = hljs.highlight('js', '\[CODE GOES HERE\]').value;
document.querySelector("#code").innerHTML = colored\_code;

And there you go!

The colored result

Here's the test code received as input:

function exemple() {
    if(console) {
        console.log("Je suis un bout de code");
    } return 1;
}

And the result after being run through highlight.js:

function exemple() {if(console) {console.log("Je suis un bout de code");} return 1;}

You'll have noticed a problem, we passed in correctly indented code, and it came out on a single line, this is because the code was injected into a <div> tag, which does not preserve the formatting of the text.

Let's see how to fix that in the next part!

Indentation with the <pre> tag

This is THE most practical tag for displaying code in html because it preserves its indentation, or more precisely it preserves the "preformatting" of the text, which means it keeps spaces, tabs, line breaks, and displays the text in a fixed-width font.

Here's an example of a piece of code displayed thanks to a <pre></pre> tag:

function exemple(){
  	if(console){
    		console.log("Je suis un bout de code");
  	}
  	return 1;
}

Problem, the indentation looks gigantic and makes the code much less readable. You just need to adjust the tab size with the 'tab-size' property in css, by default the value is 8, consider a size of 2 for fairly tight code and 4 for a more spaced-out version!

This value corresponds to the width of a space character.

<!-- tab-size: 2; -->
function exemple(){
  if(console){
    console.log("Je suis un bout de code");
  }
  return 1;
}

The finishing touch

Next, all that's left is to add a bit of extra CSS in order to style the code block however you like.

For example, here I made sure to have a dark theme, with rounded corners and an impression that the block is "carved into the page" by using the few CSS lines below:

pre {
  moz-tab-size:2; 
  tab-size: 2;
  color: white; 
  background: #263238;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px 3px rgba(0,0,0,0.7);
  padding: 20px;
  font-weight: bold;
}

And here's the final result!

function exemple(){
  if(console){
    console.log("Je suis un bout de code");
  }
  return 1;
}

We now have our recognizable code block, with the dark theme and the desired syntax highlighting, it's perfect! The code can be selected, copied and pasted at will.

It's still better than an image, right?