How To Display Code Snippets in HTML with Color?

So you want to display your code snippets in HTML but when you put them on your webpage they just disappeared ... In this tutorial, we're going to see how we can display code snippets in our HTML and the required steps to follow.

1. Encode reserved HTML characters

Some characters are reserved in HTML. For example, the less than (<) or greater than (>) signs must be replaced in your text as the browser might confuse them with tags. Reserved characters in HTML must be replaced with character entities.

Here is a list of some Reserved characters and their HTML Character Entities :

Reserved characters and their HTML Character Entities

Now you might be asking how to prepare my code snippet and replace all the reserved characters?

Don't worry, we got you covered. You can use our FREE HTML Encode Tool which is an online tool that will help you to encode plain HTML into encoded HTML.

FREE HTML Encode tool

Just paste your plain HTML in the tool's box.

How To Display Code Snippets in HTML

Then, hit the "Encode" button to get your encoded HTML.

Result HTML Encode Tool

Now, that you have your encoded code, you're ready for the next step.

2. Put your code inside Pre and Code tags

The HTML <pre> tag stands for preformatted text and as you can guess, it will preserve both spaces and line breaks of the text inside it. The text will be displayed exactly as written in the HTML source code. It is important to use this tag around your code to preserve its disposition.

The <code> tag is used to define a piece of computer code that will display its content in the browser's default monospace font. Moreover, search engines treat differently the <code> tags and you may boost your website SEO by using them.

If we apply this to our previous example, we will get the following :

<!DOCTYPE html>
        <meta charset="UTF-8" />

Well, now we managed to show our code snippet with its original disposition. But it is pretty hard to read and distinguish its content. Isn't there a way to make it more appealing and readable? 

The answer is YES! and we're going to see how to do so in the following step.

3. How To Display Code Snippets in HTML with Color?

To display our code snippets with color, we're going to use a javascript library called highlight JS.

Highlight JS is a javascript library used for syntax highlighting for the Web. It supports 196 languages and 243 styles along with automatic language detection.

Let's add this library to our webpage. In the head section just add the CSS file before the closing </head> tag.

<link rel="stylesheet" href="">

Then, before the closing </body> tag, add the following:

<script src=""></script>

And now our code will look much cleaner and more readable. There are a lot of configuration options for highlight JS and numerous themes to use. In the example, we've used the atom-one-dark theme. To learn more about the usage of highlight JS check the link to their documentation.

With that said, here is the result of our code snippet with color :

result display snippets with color

4. To wrap up with code snippets display in HTML

In this article, we went through the process of displaying code snippets on an HTML webpage. If you want to stay updated with our tutorials, bookmark our website. Don't forget also to check our FREE tools that will help you with your daily activities.


We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.