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 :
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.
Just paste your plain HTML in the tool's box.
Then, hit the "Encode" button to get your encoded HTML.
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>
<html>
<head>
<title>FreeWebToolkit</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>Welcome</h1>
</body>
</html>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="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/styles/atom-one-dark.min.css">Then, before the closing </body> tag, add the following:
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.4.0/highlight.min.js"></script>
<script>hljs.highlightAll();</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 :
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.
