How To Create Syntax Highlighter in Blogger
Syntax highlighter is a text editor that highlights writing code markup on web pages to make it easier for visitors to recognize the entire code. Commonly found on tutorial-themed blogs such as igniel.com. In addition, it can tidy up the letters and make it easy for visitors to distinguish between CSS, HTML, or Javascript code from plain text. Generally, a syntax highlighter can make letters colorful. But in this tutorial, only one color is made because it is only made using CSS. If your blog is tutorial-themed and often shares source code, then there is no harm in making a syntax highlighter on Blogspot only with CSS as below.
How to Install Syntax Highlighter on Blogger
If previously there was a .post-body pre-code and a .post-body pre-code CSS code, then delete it first so that it doesn’t crash. Then add the following line of code “BEFORE / ABOVE” </style>
.post-body pre {
background-color: #292E34; /* background color */
border-left: 5px solid #008c5f; /* left border variation */
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; /* letter color */
font-size: 12px; /* font size */
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
}How to Use Syntax Highlighter on Blogger
To use the syntax highlighter on the blog in the content of the post, just call it using <pre> and <code> like the following example
See Also: How To Create Privacy Policy Page For Blogger and WordPress
<pre><code>
<!-- Enter all CSS, HTML or Javascript code here -->
</pre></code>If you want to write HTML or Javascript tags in the syntax highlighter, it must be parsed first in Blogcrowds so as not to destroy the appearance of the template.
Installing a syntax highlighter on a pure CSS blog does not make colorful letters like the original text editors such as Sublime Text, Atom, Bracket, etc. If you want colorful then you have to use Javascript again. But this version is much lighter because it doesn’t use any script. That’s why I prefer this version over the colorful one.