How to Make a Syntax Highlighter on Blogger - TAMASEO

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.

If I search on a Google search using the keywords above, but if I see that there are indeed many who have discussed it, it is only limited to the pre code that is installed on the blog and does not discuss until it changes the color of the syntax automatically which you previously wanted.

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.

For those of you who want to try and use this syntax highlighter on the blog, here I will explain the steps and installation steps so that it's easier to understand.

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

• Login to your blogger account and go to the template then select edit HTML.
• 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;
}

• 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>

• Copy the code below before the 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>

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

• Save your template

To apply the syntax highlighter for the script code, it must be between tags <pre><code>...</code></pre> . And keep in mind, the script that will be displayed must be parsed first.

Our function is to parse so that a collection of scripts or inactive code does not cause errors and when parsed, the code will turn into a unique code (entity) which, when applied to this article, these codes are read as plain text which has no script execution value. For parsing  here .