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:

Convert the code snippet into HTML entities, this can be done by using any online converter.
Sandwich the converted code between <pre> and <code> tags. For example, <pre><code><strong>FOO</strong></code></pre>

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

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

EXAMPLE CODE DOWNLOAD

Source code on GitHub Gist | Example on CodePen

Just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

CREATING CODE SNIPPETS

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

TUTORIAL VIDEO

1) CONVERT CODE SNIPPET TO HTML ENTITIES

1-preformat.html

<!-- (A) THIS WILL BE CONFUSED AS HTML TAGS -->
<h1>It works!</h1>
<p>This is my code snippet.</p>
 
<!-- (B) CONVERT SNIPPET TO HTML ENTITIES -->
&lt;h1&gt;It works!&lt;/h1&gt;
&lt;p&gt;This is my code snippet.&lt;/p&gt;

There are several reserved characters in HTML such as < and >. To prevent clashes, convert your code snippet into HTML entities – For example, <h1> to <h1>. Just do an online search for “html entities encoder”, there are plenty of free online converters.

Alternatively, you can also use server scripts to help you do HTML entity conversion:

In PHP, just use the htmlentities() function.
Python – Check this out.
Javascript – Check out this library.

2) WRAP IN <PRE> AND <CODE> TAGS

2-wrap.html

<style>
/* (A) OPTIONAL COSMETICS */
pre {
  box-sizing: border-box;
  font-size: 14px;
  width: 100%; padding: 10px;
  overflow: auto;
  color: #00ff0a; background: #000;
}
</style>
 
<!-- (B) CODE SNIPPET -->
<pre><code>&lt;h1&gt;It works!&lt;/h1&gt;
&lt;p&gt;This is my code snippet.&lt;/p&gt;</code></pre>

By default, HTML will ignore line breaks and multiple spaces.
To retain the line breaks and multiple spaces, wrap your code snippet in a pair of <pre> preformatted tags.
Optional but recommended, wrap in another pair of <code> tags. This will help search engines better understand “this is a code snippet”.

3) CODE HIGHLIGHTERS

3-highlighter.html

<!-- (A) LOAD HIGHLIGHT.JS -->
<!-- https://highlightjs.org/ -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js" integrity="sha512-rdhY3cbXURo13l/WU9VlaRyaIYeJ/KBakckXIvJNAQde8DgpOmE+eZf7ha4vdqVjTtwQt69bD2wH2LXob/LB7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/agate.min.css" integrity="sha512-wI7oXtzNHj/bqfLA3P6x3XYbcwzsnIKaPLfjjX8ZAXhc65+kSI6sh8gLOOByOKImokAjHUQR0xAJQ/xZTzwuOA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
window.addEventListener("DOMContentLoaded", hljs.highlightAll);
</script>

<!-- (B) CODE SNIPPET -->
<pre><code>&lt;h1&gt;It works!&lt;/h1&gt;
&lt;p&gt;This is my code snippet.&lt;/p&gt;</code></pre>

Lastly, there are plenty of “code highlighters” and “pretty code” libraries all over the Internet to make the code snippets look good.

EXTRAS

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

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

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!