How To 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.

To display code snippets in HTML:

  1. First, convert the code snippet into HTML entities. This can be done by using any online converters.
  2. Then, sandwich the converted code between <pre> and <code> tags. For example, <pre><code>&lt;strong&gt;FOO&lt;/strong&gt;</code></pre>

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

 

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

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.

 

CREATING CODE SNIPPETS

All right, let us now get into how to properly create the code snippets and place them into an HTML page.

 

1) PREFORMAT TAG

1-preformat.html
<!-- (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>

Hello world, my name is John Doe.

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

2-code.html
<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

3-html-entities.html
<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, &lt; is the code for < and &gt; for >; To show <strong>, we have to type in &lt;strong&gt;. It will be a real hassle to manually type in all of these, so use online tools and even server-side scripts to help:

 

 

4) CODE HIGHLIGHTERS

4-highlighter.html
<!-- (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.

 

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

How To Show HTML Code On Websites (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *