How to display code snippets/examples on a webpage
As a computer programmer who loves writing, you are likely to find yourself writing web page content or blog posts containing code examples with illustrations on how to solve various problems.
In this case, you want to do it in such a way that the programmers reading can easily understand and even copy-paste the code. Programmers are used to coding and seeing code mostly in text editors and IDEs. Thus the easiest way to capture their attention and get them interested in reading the code on your pages/posts is to display it in the format they are used to.
In this article we explore in a comprehensive way how to display sample code snippets within a webpage/blog post like shown below:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
</head>
<body>
<h1>Sample Page Heading</h1>
<p>Sample Page paragragh</p>
</body>
</html>
In order to display code on HTML pages, we need to use two tags: <pre> and <code>
| Tag | Description |
|---|---|
| <pre> | This tag tells the browser that its contents are preformatted and should be displayed in a fixed-width font, which preserves both spaces and line breaks. |
| <code> | This tag tells the browser that its enclosed content is a piece of computer code. |
Simply enclose your code within opening and closing <code> tags and then wrap it inside the <pre> tags to ensure it appears in the browser in the same format(spacing and line-breaks) as it would on text editors.
<pre>
<code>
<!-- Write your code here -->
</code>
</pre>
Example 1
<pre>
<code>
$(function(){
alert("Hello World");
});
</code>
</pre>
The above code will be displayed on a web page as below:
$(function(){
alert("Hello World");
});
However, one thing you will note is that when trying to display HTML code on a web page, the code ends up being rendered as an HTML element. For example the HTML code below for showing a table:
<pre>
<code>
<table width="50%>
<tr>
<td>First Name</td><td>Last Name</td>
</tr>
<tr>
<td>John</td><td>Doe</td>
</tr>
</table>
</code>
</pre>
The code above will be rendered as an actual table instead of as code as shown below:
| First Name | Last Name | John | Doe |
To avoid such a scenario, use HTML character entities to replace all of the special characters in order to prevent the browser from processing the code. That way you will be able to display the source code as HTML markup.
| Character | Description | Entity1 | Entity2 | Entity3 |
|---|---|---|---|---|
| < | Left angle bracket | < | < | < |
| > | Right angle bracket | > | > | > |
| & | Ampersand | & | & | & |
Whenever you need to display a piece of code with angle brackets or ampersand, replace them with the HTML entities in either of the ways shown in the table above as shown below:
<pre>
<code>
<table>
<tr>
<td>First Name</td><td>Last Name</td>
</tr>
<tr>
<td>John</td><td>Doe</td>
</tr>
</table>
</code>
</pre>
I am sure by now you are probably asking yourself why the code background and colors are so boring. Let's now jump into highlighting the code with colors as in text editors.
That is achieved through the intervention of some plugins. In this article, we will cover two plugins.
Highlighting code with Prism plugin
Prism is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It is one of the most used and popular plugins for highlighting code on web pages/blog posts. It is used in most of the websites that you visit almost on a daily basis.
To start using it, head to the plugin Download page, customize it to your preference by ticking your theme of choice(eg. dark mode, default, twilight, etc), tick all the programming languages that you would want to include, and highlight in your web pages, and tick on the extra plugins you would want to include. Once you are done with customization just click on “Download JS” button to download the Js file and “Download CSS” button to download the CSS file.
You will need to include the prism.css and prism.js files you downloaded on your page. Example:
<!DOCTYPE html>
<html>
<head>
<link href="path/to/prism.css" rel="stylesheet" />
</head>
<body>
<script src="path/to/prism.js"></script>
</body>
</html>
Now the next step is to specify with a class attribute in the code tag which language your code is. You simply do this by using language-xxxx or lang-xxxx where xxxx denotes the language eg. language-html, language-css, language-js, language-php, etc.
Example
<pre>
<code class="language-html">
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
</head>
<body>
<h1>Sample Page Heading</h1>
<p>Sample Page paragragh</p>
</body>
</html>
</code>
</pre>
The above code is displayed as below on a web page:
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
</head>
<body>
<h1>Sample Page Heading</h1>
<p>Sample Page paragragh</p>
</body>
</html>
Let’s also add line numbers and use a different language(CSS):
<pre class="line-numbers">
<code class="language-css">
#div1 {
background-color: #ff0000;
color: #ffffff;
font-size: 16px;
text-align: center;
border-radius: 10px;
}
</code>
</pre>
The above code will be displayed as below:
#div1 {
background-color: #ff0000;
color: #ffffff;
font-size: 16px;
text-align: center;
border-radius: 10px;
}
Highlighting code with Highlight.js
Highlight.js is a popular code highlighting plugin supporting 191 languages and having 97 styles. It has automatic language detection, works with any markup, and is compatible with any js framework.
To start using it, go to the Download page, customize it by making sure that all the languages you would want to highlight are ticked. Then click on the “Download” button. This downloads a zip file named highlight.zip.
How to use Highlight.js
Uncompress the zip file, copy the highlight.pack.js file from the highlight folder and your preferred theme of the CSS file from the highlight/styles/ folder then paste them to the desired location in your project.
You will need to include the highlight.pack.js file and your choice CSS file you downloaded into your page then call initHighlightingOnLoad function. Example:
<!DOCTYPE html>
<html>
<head>
<link href="path/to/dark.css" rel="stylesheet" />
</head>
<body>
<script src="path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
The implementation of highlight.js is similar to that of prism.js in a number of ways such as specifying which language the code is in using language-xxxx or lang-xxxx where xxxx denotes the language eg. language-html, language-css, language-js, language-php, etc. But unlike in prism, we can add the name of the language in the class and omit the language/lang part eg class="html".
Example
<pre>
<code class="html">
<!DOCTYPE html>
<html>
<head>
<title>Sample Page Title</title>
</head>
<body>
<h1>Sample Page Heading</h1>
<p>Sample Page paragragh</p>
</body>
</html>
</code>
</pre>
The above HTML code is shown as below using the dark.css highlight.js plugin theme.
Now you are good to go! It’s my hope that this article has helped you enough to start to add your sample codes to web pages and blog posts. Follow us on Social Media to stay updated when we add new content.
