How to Add a Code Box on Blogger in 2023

What is a code box? , a code box is to put your JavaScript, HTML, CSS and other function codes. Typically used to put sample code for a tutorial or guide.

blogger code box

Here at I will show you how you can put a code box on Blogger by following a few simple steps effectively.

Some Blogger templates integrate some shortcodes to add your own code box, but not all of them bring that functionality within their features. Therefore, I am going to reveal how to put it in case your theme does not have this function.

Install Highlight.js

highlight.js is a repository that will allow us to add our code box to our blog natively. To insert highlight.js in our Blogger we are going to copy the following code before the </body> tag . It will allow us to call the special functions for our code box.

To get the latest version of Highlight.js I recommend you get it from its official website . Then replace the updated URL.

<script src='//[email protected]/build/highlight.min.js'/>
  <script src='[email protected]/src/highlightjs-line-numbers.min.js'/>
	<script>hljs.initHighlightingOnLoad(); </script>
  	<script>hljs.initLineNumbersOnLoad(); </script>

highlight JS code box

DIV function

Now that we have our highlight.js installed in Blogger, the second thing is to place somewhere in our Blog the following to put our code box.

For this, we must put the following function in HTML view of the entry we are editing. It does NOT work if we are editing in draft view. Copy the following code into your input:


-- your code goes here --


Format our Code

Although we already have the most important function to put our code box in Blogger, well, we would need a step to complete it successfully.

We enter the following link to decode the code that we are going to place inside the code box in our blog. This way we won't get an error when pasting our code. We copy and paste.

html entity encoder decoder

Brief Summary to put our Code Box in Blogger

To clarify simply:

  • We add the latest highlight.js version before the </body> tag
  • we place in the input <pre><code> </code></pre> and put our code inside.
  • Finally we decode our Div, CSS or JS to place it inside the box and with this we have our code in a code box.

Publicar un comentario

Déjame un mensaje.

Artículo Anterior Artículo Siguiente

نموذج الاتصال