How To Display Code Snippet In HTML (Properly)

Once upon a time, a student copy-pasted a code snippet into her blog. That didn’t turn out well with missing segments, and the entire HTML page is somehow messed up. TLDR for those who want to insert code snippets into HTML:

  • Convert your code snippet into HTML entities first. You can use any online “HTML entities converter” or a plugin in your code editor.
  • Create a pair of <pre><code> tags, sandwich the converted code snippet inside.

That’s all, but read on if you need a “step-by-step” example and a few more goodies. Let’s go.

 

CODE DOWNLOAD

ZIP File

I have released this under the MIT license, feel free to use it in your own project – Personal or commercial. Some form of credits will be nice though. 🙂

 

 

VIDEO TUTORIAL

 

 

1) DUMMY CODE SNIPPET

<h1>Hello World!</h1>
<p>This is a dummy code snippet.</p>

For this example, we will work with an HTML snippet. As you can see, directly copying and pasting this snippet into any HTML page will render <h1> as a heading and <p> as a paragraph.

P.S. For those who are “not working with HTML”, it does not matter which programming language. Code snippets such as if (varA<varB && varC>varD) { ... } will still get confused as an HTML tag.

 

 

2) CONVERT CODE SNIPPET TO HTML ENTITIES

&lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;p&gt;This is a dummy code snippet.&lt;/p&gt;

What happened here is character conversion, so the symbols don’t get confused as HTML tags.

  • &lt; is a special character in HTML that represents “lesser than” <.
  • &gt; represents “greater than” >.
  • There are many more such as:
    • &amp; Ampersand.
    • &quot; Quotes.
    • &apos; Apostrophe.

But there’s no need to do this conversion manually.

  • Do an online search for “HTML entities converter”, there are plenty of free online converters.
  • If you use VSCode, there is an html-entities extension.

 

 

3) WRAP IN <PRE><CODE>

<pre><code>&lt;h1&gt;Hello World!&lt;/h1&gt;
&lt;p&gt;This is a dummy code snippet.&lt;/p&gt;</code></pre>

Lastly, wrap the code snippet in:

  • <pre> Preformatted text. This will retain all spaces, tabs, and line breaks.
  • <code> Specifies that this is computer code. Well… This is optional, but most people add this as a “de facto standard”.

 

 

OPTIONAL) CODE HIGHLIGHTER

<!-- (PART A) LOAD HIGHLIGHT.JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/a11y-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>

<!-- (PART B) CODE SNIPPET -->
<pre><code class="language-html">CODE-SNIPPET-HERE</code></pre>

<!-- (PART C) INIT HIGHLIGHT.JS -->
<script>hljs.highlightAll();</script>

If you want to “prettify” the code snippet, there are quite a few code highlighter libraries that you can use. The common ones are:

 

 

THE END – TO HIGHLIGHT OR NOT TO

That’s all for this quick tutorial, one last bit before we end. If you have not realized, Master Coffee is not using a code highlighter. Don’t get me wrong, code highlighters are cool. It’s just that they add to the “loading and processing” bloat, they don’t help when you want snappy pages that load within 2 seconds.

So yep, it’s your choice. If you want “super fast and lightweight”, just add a few lines of CSS to make the code slightly more legible:

<!-- INSERT IN <HEAD> -->
<style>
pre { padding: 20px; color: #222; background: #efefef; }
code { font-family: 'Courier New', Courier, monospace; font-size: 18px; }
</style>

 

 

CHEAT SHEET

Display Code Snippet In HTML (click to enlarge)