How to display code in a web page [just like in text editors]

Posted on February 01, 2021

How to display code in a web page[just like in text editors]

As a computer programmer who loves writing, you are likely to find yourself writing web page contents or blog posts that contain code snippets for illustrating how to solve some 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 in 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>

TagDescription
<pre>This tag tells to the browser that its contents are preformatted and should 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 a HTML element. For example the HTML code below for showing a table:

 
  <pre>
   <code>
    <table>
     <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 NameLast Name
JohnDoe

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.

CharacterDescriptionEntity1Entity2Entity3
<Left angle bracket&lt;&#x0003C;&#60;
>Right angle bracket&gt;&#x0003E;&#62;
&Ampersand&amp;&#x00026;&#38;

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>
    &lt;table&gt;
     &lt;tr&gt;
      &lt;td&gt;First Name&lt;/td&gt;&lt;td&gt;Last Name&lt;/td&gt;
     &lt;/tr&gt;
     &lt;tr&gt; 
      &lt;td&gt;John&lt;/td&gt;&lt;td&gt;Doe&lt;/td&gt;    
     &lt;/tr&gt;
    &lt;/table&gt;
   </code>
  </pre>
 

I am sure by now you are probaly asking yourself why the code background and colors are so boring. Lets now jump into highlighting the code with colors as in text editors.

That is achieved through 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 plugin for highlighting code on web pages/blog posts. It is used in most of the website 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 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 in 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">
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  	&lt;title&gt;Sample Page Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h1&gt;Sample Page Heading&lt;/h1&gt;
   &lt;p>Sample Page paragragh&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
 </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, the 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 in to 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 ommit the language/lang part eg class="html".

Example

 
 <pre>
 <code class="html">
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  	&lt;title&gt;Sample Page Title&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
   &lt;h1&gt;Sample Page Heading&lt;/h1&gt;
   &lt;p>Sample Page paragragh&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
 </code>
 </pre>
 

The above HTML code is shown as below using the dark.css highlight.js plugin theme.

highlight.js html code highlighting

Now you are good to go! It’s my hope that this article has helped you enough to start add your sample codes in web pages and blog posts. Follow us on Social Media to stay updated when we add new content.

The Code Pot Technologies

The Code Pot Technologies
Typically replies in minutes

The Code Pot Technologies
Hi there 👋

We are online on WhatsApp to answer your questions.
Ask us anything!
×
Chat with Us