Display Code Snippets in HTML (Simple Examples)

Welcome to a tutorial on how to display code snippets in HTML. Want to present or share some code snippets on your website? Just like how it is being done right here on Code Boxx? Well, it really isn’t that difficult.

That covers the basics, but let us walk through more details in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

QUICK SLIDES

TABLE OF CONTENTS

Download & Notes	Code Snippets	Useful Bits & Links
The End

QUICK NOTES

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

1) PREFORMAT TAG

<!-- (A) BROWSERS WILL IGNORE LINE BREAKS, RENDER SINGLE LINE -->
<p>Hello world, 
my name is John Doe.</p>
 
<!-- (B) PREFORMATTED TEXT WILL RETAIN LINE BREAKS + WHITE SPACES -->
<pre>var foo = "bar";
var hello = "world";
console.log(foo);
console.log(hello);</pre>

var foo = "bar";
var hello = "world";
console.log(foo);
console.log(hello);

As you may have noticed already – Browsers will ignore line breaks and multiple white spaces in most “normal” HTML tags. That is not what we want, and so, we have to use is the reformat <pre> tag for code snippets to retain their formatting.

2) CODE TAG

<pre><code>var foo = "bar";
var hello = "world";
console.log(foo);
console.log(hello);</code></pre>

var foo = "bar";
var hello = "world";
console.log(foo);
console.log(hello);

Moving forward, this one is kind of optional but highly recommended. The <code> tag is used to demarcate blocks of code snippets, and we can use it in combination with the <pre> tag.

The importance of the <code> tag actually lies in search engine optimization (SEO). Yes, just this simple <code> tag will help search engines to better understand the contents of your page. Process the code sections differently, and probably gain some brownie points to rank better.

3) HTML ENTITIES

<pre><code>&lt;strong&gt;
  HELLO WORLD!
&lt;/strong&gt;</code></pre>

<strong>
  HELLO WORLD!
</strong>

Here comes the most troublesome part. Remember that HTML has reserved some characters as tags and syntax? For example, if we place <strong> as-it-is into a <pre><code> section,  it will be mistaken as a tag instead. So to display the reserved characters, we have to convert them into their equivalent HTML entities.

For example, < is the code for < and > for >; To show <strong>, we have to type in <strong>. It will be a real hassle to manually type in all of these, so use online tools and even server-side scripts to help:

• Just do a search online for HTML entity converter, there are tons of free online converters.
• In PHP, just use the htmlentities() function.
• Python – Check this out.
• Javascript – Check out this library.

4) CODE HIGHLIGHTERS

<!-- (A) HIGHLIGHT JS LIBRARY -->
<!-- https://highlightjs.org/ -->
<!-- https://cdnjs.com/libraries/highlight.js/ -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

<!-- (B) AUTOMATIC PARSE -->
<pre><code>&lt;strong&gt;HELLO WORLD!&lt;/strong&gt;</code></pre>

Lastly, there are plenty of “code highlighters” and “pretty code” libraries all over the Internet.

• Highlight JS
• Rainbow
• Prism
• Microlight
• Syntax Highlighter

LINKS & REFERENCES

• <pre>: The Preformatted Text element – MDN
• <code>: The Inline Code element – MDN
• Entity – MDN
• HTML Entity List – Freeformatter
• htmlentities Manual – PHP

INFOGRAPHIC CHEAT SHEET