Home
blogging
Tutorials

How to Add HTML Code Box in Blogger Post

Here, we have discussed the tutorial for how to add or use Syntax highlighter on blogger. Syntax highlighter is defined as a text editor which ...
Table of Contents

Hey guys, are you searching tutorial for how to add or use Syntax highlighter on blogger, then this is the right place for you. 

How to Add HTML Code Box in Blogger Post Syntex highlighter on blogger

Here, we will discuss step by step guide with which you will be able to easily add syntax highlighter on blogger. But before that, let's talk about syntax highlighter;

What is syntax highlighter?

Syntax highlighter is defined as a text editor which is used to highlight the writing code on web pages due to which entire code can be easily recognised by the visitors. With syntax highlighter visitors can easily distinguish between HTML, CSS and JavaScript code from the rest of text.

Now, let's discuss how to add or use Syntax highlighter on blogger.


How to add or use Syntax highlighter on blogger

Here, we will discuss step by step guide to add or use Syntax highlighter on blogger;

1. Go to blogger site and Sign-in with your Google account.

2. In the left side, go to Themes > Edit HTML.

How to Add HTML Code Box in Blogger Post Syntex highlighter on blogger

3. Now, remove previously css code .post -body pre and .post -body pre code and add the following css code Above/Below </Style> tag;

.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}

4. After this, click on Save theme.

5. To use the syntax highlighter or code box or Comment box html code for blogger, simply use the <pre> and <code> tags.  still don't understand lets have a look ;

<pre><code><!--Your (html, CSS or Javascript) Codes or Text--></code></pre>


Conclusion

Above we have discussed the tutorial for how to add or use Syntax highlighter on blogger. Syntax highlighter is defined as a text editor which is used to highlight the writing code on web pages due to which entire code can be easily recognised by the visitors. By following above mentioned steps anyone can easily add or use Syntax highlighter on blogger. I hope this information is helpful to you all.