How to Make and Install Syntax Highlighter on Blogger

Table of Contents

You must have often encountered this pre code on blogs where articles or posts discuss script code, be it CSS, HTML, PHP, JAVASCRIPT and so on.

How to Make and Install Syntax Highlighter on Blogger

In general, search on the Google search engine using the keywords above, many have discussed it, but only the pre code was installed on the blog and did not discuss it until it changed the color of the syntax automatically.

What is Syntax Highlighter

Syntax Highlighter is a script that can make code colorful. Where we make these colors by calling the CSS and JavaScript script styles.

Immediately, for those of you who want to try and use this syntax highlighter on the blog, here I will explain the stages and steps for installing it so that it is easier to understand.

For those of you who are beginners, I always remind you. Before making changes to the template, it's a good idea to back up your blog template first.

1. Login blogger

2. Click the Theme menu > Edit HTML

3. Then copy the code below right above the ]]></b:skin> or </style>

pre {
padding:.5em 1em;
margin: 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#f1f1f1;
font-size:12px;
clear:both;
border-left:15px solid #ccc;
border-right:1px solid #ccc;
color:#999;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:15px;
color:#ff3c00;
font-size:13.5px;
}
pre code {
display: block; padding: 0.5em;
color: #555;
}
#comments pre code {
padding: 0 !mportant;
color: #555;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: slategray;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #0077aa;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #990055;
}
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #669900;
}
pre .attribute {
color: #588400;
}
pre .rules .value{
color: #333;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title,
pre .css .pseudo {
color: #a0733f;
}
pre .deletion {
color: #905;
}
pre .tex .formula {
background: #073642;
}

4. Copy the code below just above the code </head>

<script src="https://raw.githack.com/hanyapedia/hanyapedia/master/highlight-pack.js" type="text/javascript"></script>
<script>hljs.initHighlightingOnLoad();</script>

5. Copy the code below before code </body>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
 pres[i].addEventListener(&quot;dblclick&quot;, function () {
 var selection = getSelection();
 var range = document.createRange();
 range.selectNodeContents(this);
 selection.removeAllRanges();
 selection.addRange(range);
 }, false);
}
</script>

The function of the code above is to select all when you double click on the script area to be selected.

6. Save your theme.

To apply the syntax code must be between <pre><code> and </code></pre>. Keep in mind the script that will be displayed must be parsed first.

The function performs parsing so that a collection of scripts or inactive code does not cause errors and when parsed, the code will turn into a unique code which.

When applied to this article, these codes are read as plain text which has no script execution value.