How to embed HTML code in websites

Ever thought of embedding HTML code in your website ?
Lets see how this can be achieved but wait, why do we need a blog for this isn’t it as simple as tying text?
So if you are not scratching your head by now let me tell you it is not as simple as tying text as HTML is a markup language and as soon as you type any piece of markup with in it, It marks it up 😆!!!

And voilà ! All our dreams of doing it simply by tying it as it is shatters.
Still we don’t need to worry because if a markup language is making our life difficult then JavaScript is there make our life easier.

Let’s see how it is done the hard way:

so you can type something like this code :

<div class="c1 primary">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c2 error">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At distinctio
quia voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing
elit. At distinctio quia voluptatibus! Lorem ipsum dolor sit amet
consectetur adipisicing elit. At distinctio quia voluptatibus! Lorem
ipsum dolor sit amet consectetur adipisicing elit. At distinctio quia
voluptatibus!
<div class="c3 success">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c4 warning">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>

it will give some output like this :

rendered HTML

Notice how I changed < to “&lt;” and > to “&gt;”. These are escape characters in HTML but isn’t it cumbersome to type all of that in HTML. Yes ! it is !

As any respectful programmer would do when they find some redundant task to I decided to automate replacing these. let’s see how can we do that:

An easier work around:

We will take help from our good friend browser API and javascript.
Step one is to wrap our code in a container and give that container a class name. Some what like this:

<div class="language-markup">
<div class="c1 primary">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c2 error">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At distinctio
quia voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing
elit. At distinctio quia voluptatibus! Lorem ipsum dolor sit amet
consectetur adipisicing elit. At distinctio quia voluptatibus! Lorem
ipsum dolor sit amet consectetur adipisicing elit. At distinctio quia
voluptatibus!
<div class="c3 success">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c4 warning">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
</div>

You can give any class name. Now lets employ javascript for work. I wrote it small piece to do the job :

function preFormatter() {
const code = document.querySelectorAll(".language-markup");
for (let i of code) {
let x = i.innerHTML;
x.replaceAll("<", "&lt;");
x.replaceAll(">", "&gt;\n");
i.textContent = x;
}
}
preFormatter();

You need to save this in a file and link this to your HTML. Notice how this code cleverly checks for all the markup pieces available and grabbing the HTML it changes the textContent to what is needed. Yes! that’s it. lets have a look at output now:

rendered HTML

Phew! saved a lot of manual work right but wait is that it? How on earth anyone will read it?

Lets see how to maintain formatting:

We just need change our code container to <pre> tag which will maintain formatting. Should read more about pre tag from the single source of truth (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre).

lets see the code and output again:

<pre class="language-markup" data-prismjs-copy="Copy">
<div class="c1 primary">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c2 error">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At distinctio
quia voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing
elit. At distinctio quia voluptatibus! Lorem ipsum dolor sit amet
consectetur adipisicing elit. At distinctio quia voluptatibus! Lorem
ipsum dolor sit amet consectetur adipisicing elit. At distinctio quia
voluptatibus!
<div class="c3 success">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c4 warning">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
</pre>

Here is the magic:

Ahh! Finally it looks good right. Still we can put cherry on the cake by making some code highlights. There are several of libraries out there which can help us here, we can use anyone of them form here. I will be demonstrating use of prismjs.

Cherry on the cake:

Step1 is to go to “https://prismjs.com/” and download js and css files needed.
you can select from different themes. Below image shows the details I selected while downloading.

theme selection

Aesthetic of Okaidia theme

By clicking these buttons you can download them.

Step 2 is to add these files to out document and make some little changes to out HTML. We need to wrap our code with “ <pre></code class=”language-markup”></code></pre>”

This class used is specific to HTML language and is important for highlighting. Notice how I have used the same class in our custom script so that we can go with the flow.

let’s see the code:

<pre><code class="language-markup" data-prismjs-copy="Copy">
<div class="c1 primary">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c2 error">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At distinctio
quia voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing
elit. At distinctio quia voluptatibus! Lorem ipsum dolor sit amet
consectetur adipisicing elit. At distinctio quia voluptatibus! Lorem
ipsum dolor sit amet consectetur adipisicing elit. At distinctio quia
voluptatibus!
<div class="c3 success">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c4 warning">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
</code></pre>

Don’t forget to add css and js files:

<script src="../utils/preFormatter.js" type="module"></script> <script src="../utils/prism.js" type="module"></script>
<link rel="stylesheet" href="../utils/prism.css" />

Here is the output:

rendered HTML

And just to mention I have restricted the size of the div so it is scroll able. You can add your custom css to change it.

Now I know some readers will still be confused about the html flow so for refrence I will add my html document here.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="../index.css" />
<link rel="stylesheet" href="../utils/prism.css" />
<title>thisUI</title>
</head>
<body >
<header class="tuid__head">
<nav class="tuid__nav--top"></nav>
</header>
<div
class="tuid__drawer tui__dis-none invis tui__invisible-scrollbar"
></div>
<main class="tui__flex--center tuid__main tui__invisible-scrollbar">
<div class="preformat">
<pre><code class="language-markup" data-prismjs-copy="Copy">
<div class="c1 primary">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c2 error">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. At distinctio
quia voluptatibus! Lorem ipsum dolor sit amet consectetur adipisicing
elit. At distinctio quia voluptatibus! Lorem ipsum dolor sit amet
consectetur adipisicing elit. At distinctio quia voluptatibus! Lorem
ipsum dolor sit amet consectetur adipisicing elit. At distinctio quia
voluptatibus!
<div class="c3 success">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
<div class="c4 warning">
<strong>Lorem</strong> Lorem ipsum dolor sit amet consectetur
adipisicing elit.
</div>
</code></pre>
</div>
</main>
<footer class="tuid__foot"></footer>
<script src="../utils/preFormatter.js" type="module"></script>
<script src="../index.js" type="module"></script>
<script src="../utils/prism.js" type="module"></script>
</body>
</html>

I shared the complete html just for reference but you can ignore extra stuff and focus on what I explained above to achieve the same results.
Thank you for being such a patient reader !