Automatic code highlighting on websites

Automatic markup of code on sites

In this article, you will learn how to enable syntax highlighting of the source code on your websites. Code highlighting means automatic coloring of program source code elements in different colors in accordance with the syntax of the programming language.

The shown option is suitable for both WordPress sites and any other sites.

Note: If you want to add syntax highlighting to your WordPress site, then you might want to start with WordPress plugins.

Any source code that is inside the tags will be highlighted:

<pre><code>
CODE
</code></pre>

Let me remind you that the HTML “PRE” tag preserves the formatting of the text placed inside this tag. First of all, we mean spaces and indents, which significantly improve the readability of the source code of programs. Therefore, usually, when writing articles, the source code is placed in the “PRE” tag.

As for the HTML “CODE” tag, the text that goes into it is in a monospaced font, like code in most programming books. The “CODE” tag is used alone for single-line source code elements, or in combination with the “PRE” tag for multi-line code snippets.

Looking ahead, I’ll say that if the source code on your site is placed in the “PRE” tag without using the “CODE” tag, then the source code highlighting method discussed in this note can still be applied, although an additional HTML processing step is required before this. This will also be discussed in this article.

What to use to highlight the code on the site

There are many different options, HighlightJS will be covered in this article.

HighlightJS is designed to highlight source code syntax on sites in all “PRE” blocks, written in JavaScript with automatic language detection and zero dependencies.

HighlightJS is very easy to add to a website with no additional configuration of source blocks required.

HighlightJS supports 192 programming languages.

There are 248 source code themes, that is, syntax highlighting options for the code.

Here is an example HTML file before and after using Highlight.JS:

Official websites of Highlight.JS:

Quick start with HighlightJS

To highlight the code on the site, you need to download and integrate into the pages of your site only two files:

highlight.min.js
default.min.css

You can download the highlight.min.js file on this page: https://github.com/highlightjs/cdn-release/tree/main/build

And you can find the default.min.css file on this page: https://github.com/highlightjs/cdn-release/tree/main/build/styles

Integrate these files into your website pages inside the HTML “HEAD” tag. For example, in the root folder of the site, I created the “highlightjs” directory and placed both of these files there, then the following code is used to integrate the files into the site:

<link rel="stylesheet" href="/highlightjs/default.min.css">
<script src="/highlightjs/highlight.min.js"></script>

Also inside the HTML “HEAD” tag, add the following line:

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

All is ready! Now automatic source code syntax highlighting will work for any code inside tags:

<pre><code>
CODE
</code></pre>

How to use HighlightJS to highlight code on a website

Let's take a look at more advanced use cases for HighlightJS.

Manual code markup

If automatic language detection doesn't work for you, or if you want to manually specify the programming language for other reasons, then you can do this using the “class” attribute:

<pre><code class="language-html">...</code></pre>

The programming language must be specified instead of XXX in class="language-XXX". This attribute can be applied to “PRE” and “CODE” tags:

<code class="language-php">...</code>

<pre class="language-css"><code>...</code></pre>

Excluding blocks from syntax highlighting

To apply the Highlight.js style to plain text without actually highlighting it, set the language to “plaintext”:

<pre><code class="language-plaintext">...</code></pre>

To completely skip code block highlighting, use the “nohighlight” class:

<pre><code class="nohighlight">...</code></pre>

Choosing a code highlighting theme

The default.min.css file defines the appearance of blocks with highlighted source code. The default theme seemed to me not very expressive and not contrasting, at least for the HTML language.

On the page https://github.com/highlightjs/cdn-release/tree/main/build/styles you can choose any other *min.css type file, each of which is a separate skin.

On the page https://highlightjs.org/demo you can switch themes.

This will help you quickly and visually understand the difference between different source code syntax highlighting themes.

Reducing the size of the highlight.min.js file by selecting only the languages you need

The highlight.min.js file contains support for many programming languages. If you want to get the *min.js file for one specific programming language or for several programming languages of your choice, then go to https://highlightjs.org/download/

Here you can mark the programming languages you are interested in.

In the downloaded archive you will find *min.js files for each selected programming language in the “languages” folder.

In the root folder of the archive there is a file highlight.min.js, it combines all the languages you have chosen.

Support for rare programming languages and markups in highlight.min.js. Why is the programming language I need not supported in highlight.min.js

By default, highlight.min.js only includes support for the most popular programming languages. If the programming or markup language you need is not available, then go to https://highlightjs.org/download/ and download your version of highlight.min.js with the languages you need.

Source code line numbering

According to the developer, by default, Highlight.js only detects the language and sets the markup colors and does not have options such as line numbers or copy buttons.

However, we can still do it thanks to the developers on GitHub who have implemented additional features.

To add numbering, you need to embed an additional file highlightjs-line-numbers.js

<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@latest/dist/highlightjs-line-numbers.min.js"></script>

Then call the hljs.initLineNumbersOnLoad() function right after hljs.highlightAll()

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

Adding a Copy Code Button

Official site address: https://github.com/arronhunt/highlightjs-copy

As with the line numbers, you need to embed the JS and CSS files in order to customize the copy button.

<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css" />

Unlike line numbers, you must set the hljs.addPlugin(new CopyButtonPlugin()) function before hljs.highlightAll()

<script>
	hljs.addPlugin(new CopyButtonPlugin());
	hljs.initLineNumbersOnLoad();
</script>

What should I do if the source code on the site is placed in the “PRE” HTML tags without the “CODE” tag?

You can use regular expression search and replace to have all “PRE” tags additionally given a “CODE” tag.

For example, if your site is written in PHP, then the following line of code will take the contents of the $html variable as input and add the “CODE” tag to all “PRE” tags. The resulting string will be saved to the $html_fixed variable:

$html_fixed = preg_replace('#<pre>(.*?)</pre>#usi', '<pre><code>\1</code></pre>', $html);