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.
Here at seoblogariel.online 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='//cdn.jsdelivr.net/gh/highlightjs/[email protected]/build/highlight.min.js'/>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/src/highlightjs-line-numbers.min.js'/>
<script>hljs.initHighlightingOnLoad(); </script>
<script>hljs.initLineNumbersOnLoad(); </script>
<script>hljs.highlightAll();</script>
I recommend you
How to Put a Table of Contents on Blogger this 2022
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:
<Pre><code>
-- your code goes here --
</code></Pre>
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.
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.
Etiqueta
English