.jpg "Display code in Blogger Website")
HTML is not only used for web pages but also for documents, emails, and other types of files. It can be used to create a website or just as a blog post.
During my initial days on Blogger, it was complicated to display my coding snippets on my blog post. I was getting acquainted with the interface. The pre- tag was not appearing as expected due to the theme that I was using. I used a Textarea for HTML display / coding snippets on this blog. But it did not allow me to add line numbers and users had to copy the code by selecting the contents instead of a button click. I frequently have a need to display html code or web code for website design tutorials.
Things changed; as I started using Pastebin services like Textbin or Ghostbin. My website speed took a hit as these services were taking more time to load and display my code snippets.
Finally, I decided to change the theme to make the pre-tag work as expected. I used hightlightJS to format html code with color highlighting and add line numbers to code snippets to display code in website and another JS library to display highlightJS copy code button to copy the code block to the clipboard at the click of a button.
Today, I am sharing the exact way I did this. So in this post, we will find out how to add code snippets to the website. You will know it is very simple to display code, make it more appealing and easy to understand using the method described in this article.
Though the title mentions Blogger, the method described here can work on any website hosted on any platform as long you can edit it in the HTML view.
To display HTML code on a website, always use the pre-tag.
The pre-tag is used to display text formatted with a monospace font. This means that all letters in the text will be the same width, unlike normal paragraphs where there can be variations in letter spacing and line breaks.
Using the pre-tag inside to display HTML code in HTML view.
Sample code JavaScript snippet - JavaScript code in html example
<pre><code>
//your escaped code here
function say() {
alert("hello world");
}
</code></pre>
To display an HTML code on your website, use the pre-tag. The pre-tag is specifically used for displaying markdown code and used to display HTML code on a webpage. This can be done by simply typing in the code in any text editor or word processor. You may want to make sure that you’re previewing the code in the browser before trying this out since some themes will not show any information.
As you can see the code appears very unappealing with no highlighting and line numbers by default in Blogger. Another problem writing code in HTML is that the code will be interpreted as actual HTML code instead of being displayed in browser. To prevent and to show coding, we need to escape it using the HTML entities encoder. The encoder converts certain HTML characters to escaped characters like the '&' character is escaped by using '&'.
Let's now add the highlighting to the code.
Adding code highlighting
HighlightJS library provides a quick and easy way to add the code highlighting. To add the highlighting we can load the library using the CDN link.
There are almost 197 languages and 248 styles that we can use. To see the complete list and demo you can visit their homepage. It is free and no need to use any log in code to access it.
To add the code highlighting, first select the styles CSS as per your choice at the beginning of the blog post as shown below. We are using Stackoverflow style here. And immediately after style, we loaded the highlightJS code and its common languages pack.
You can use more styles with relevant CDN links.
Part 1:
Adding styles & scripts via CDNs
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/stackoverflow-light.min.css" integrity="sha512-RDtnAhiPytLVV3AwzHkGVMVI4szjtSjxxyhDaH3gqdHPIw5qwQld1MVGuMu1EYoof+CaEccrO3zUVb13hQFU/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js"></script>
Once you add these, you would see the default highlighting already applied to the web site code. Still, there is some more work involved. We want to Stackoverflow style along with other languages. For that, we use the below command inside the script tag. This command should be added at the end of your article.
Part 2:
Run highlighter
<script>
hljs.highlightAll();
</script>
Between the part 1 and part 2 code, we can write our article, and to add the code snippet, we can use the pre-tag as we discussed at the beginning of the article.
Next, we will add the line numbers.
Adding line numbers to the code snippets.
For line numbers, we will use highlightJS line numbers JS library the CDN link is to be added in part 1 just after the highlightJS as shown below.
Adding styles & scripts via CDNs
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/stackoverflow-light.min.css" integrity="sha512-RDtnAhiPytLVV3AwzHkGVMVI4szjtSjxxyhDaH3gqdHPIw5qwQld1MVGuMu1EYoof+CaEccrO3zUVb13hQFU/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.6.0/highlightjs-line-numbers.min.js" integrity="sha512-nkjLcPbHjdAof51b8uUd+6q4YH7YrMwh+kfTwSBrg5T/yMKrz8GUxM4uJJ1xAL7Q1lfAMIEowDsTzfWskZ5RcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Similarly, in part 2 we add its command after the highlightJS.
Run the Line number script
<script>
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
</script>
You would now see the line numbers are added to the code snippets.
Finally, we will add the Copy code button.
Adding the copy code button to code snippets
To add this button we will use the Copy code button library.
The CDN link should be added after the highlightJS line numbers library in part 1 as shown below.
Adding styles & scripts via CDNs
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/stackoverflow-light.min.css" integrity="sha512-RDtnAhiPytLVV3AwzHkGVMVI4szjtSjxxyhDaH3gqdHPIw5qwQld1MVGuMu1EYoof+CaEccrO3zUVb13hQFU/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.6.0/highlightjs-line-numbers.min.js" integrity="sha512-nkjLcPbHjdAof51b8uUd+6q4YH7YrMwh+kfTwSBrg5T/yMKrz8GUxM4uJJ1xAL7Q1lfAMIEowDsTzfWskZ5RcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/gh/mith83/copycode@V1.2/copycodebutton.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mith83/copycode@V1.2/copycodebutton.css"></link>
To make this work, we should add container div with class - 'code-container' to code snippets. Also, add a p tag just before the opening pre-tag of the snippet. This forms the title for the code snippets as shown below.
Sample Code JavaScript Snippet - JavaScript code in html example
<div class="code-container">
<p class="code-title">Insert code title here</p>
<pre><code>
//your escaped code here
function say() {
alert("hello world");
}
</code></pre>
</div>
One last step, add the command to activate the copy code button in part 2 before the highlightJS command as shown below.
Run script to add Copy Code button
<script>
addcopycodebutton();
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
</script>
You can now see the completed code snippet.
Here is the completed code for reference
Completed code
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/stackoverflow-light.min.css" integrity="sha512-RDtnAhiPytLVV3AwzHkGVMVI4szjtSjxxyhDaH3gqdHPIw5qwQld1MVGuMu1EYoof+CaEccrO3zUVb13hQFU/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/go.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.6.0/highlightjs-line-numbers.min.js" integrity="sha512-nkjLcPbHjdAof51b8uUd+6q4YH7YrMwh+kfTwSBrg5T/yMKrz8GUxM4uJJ1xAL7Q1lfAMIEowDsTzfWskZ5RcQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/gh/mith83/copycode@V1.2/copycodebutton.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mith83/copycode@V1.2/copycodebutton.css"></link>
<div class="code-container">
<p class="code-title">Insert code title here</p>
<pre><code>
//your escaped code here
function say() {
alert("hello world");
}
</code></pre>
</div>
<script>
addcopycodebutton();
hljs.highlightAll();
hljs.initLineNumbersOnLoad();
</script>
Conclusion
In conclusion, you can use the pre-tag when you want to display HTML code on your website and to format html code you can easily use the above method to display your code snippets, make them appear professional and easy-to-understand.
Let us your queries in the comments and subscribe to the blog for more interesting articles.
Follow @mith83
