Syntax Highlighter is a special feature of the process of moving the code of a particular programming language with writing, the color of the text, the exact same position that is contained in a programming language code to be moved or copied into other written forms so that it is easier to read or study it.
Syntax Highlighter works the same way as blockquote, but the difference is that the blockquote feature is usually just one color, to change the color according to the original code, it must be done manually. So the point is Syntax highlighter will be effective in the process of making or moving it when compared with the blockquote feature.
Well, here Wiendhy will provide a tutorial on How to Install Syntax Highlighter in Posts like this blog, let's continue to add it.
How to Install Syntax Highlighter in Themes
First, log in to Blogger> Select Blog> Click the Theme menu and click the Edit HTML button> Add the CSS code below before </head> or & lt; / head & gt; & lt;!-<head />-& gt;
Note, this code that I will share will function properly if the blog has added a jquery library. Examples of jquery libraries like this <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
<style type='text/css'>
/* Highlighter */
pre{white-space:pre;word-wrap:normal;overflow:auto;font-size:14px;margin:0;padding:0}hr{margin-top:2rem;background:#ccc;height:1px;border:0;margin-bottom:2rem}
.post-body code{padding:1.2em}.post-body pre{padding:0;border-radius:3px;background-color:#292e34;word-spacing:normal;word-break:normal;line-height:1.4em}.post-body .hljs{display:block;overflow-x:auto;padding:1.2em;background:#2b2b2c;color:#fff;line-height:1.5;text-align:left;word-spacing:0;font-family:monospace;border-radius:3px}.post-body .hljs-name,.post-body .hljs-strong{font-weight:bold}.post-body .hljs-code,.post-body .hljs-emphasis{font-style:italic}.post-body .hljs-tag{color:#62c8f3}.post-body .hljs-variable,.post-body .hljs-template-variable,.post-body .hljs-selector-id,.post-body .hljs-selector-class{color:#ade5fc}.post-body .hljs-string,.post-body .hljs-bullet{color:#a2fca2}.post-body .hljs-type,.post-body .hljs-title,.post-body .hljs-section,.post-body .hljs-attribute,.post-body .hljs-quote,.post-body .hljs-built_in,.post-body .hljs-builtin-name{color:#ffa}.post-body .hljs-number,.post-body .hljs-symbol,.post-body .hljs-bullet{color:#d36363}.post-body .hljs-keyword,.post-body .hljs-selector-tag,.post-body .hljs-literal{color:#fcc28c}.post-body .hljs-comment,.post-body .hljs-deletion,.post-body .hljs-code{color:#888}.post-body .hljs-regexp,.post-body .hljs-link{color:#c6b4f0}.post-body .hljs-meta{color:#fc9b9b}.post-body .hljs-deletion{background-color:#fc9b9b;color:#333}.post-body .hljs-addition{background-color:#a2fca2;color:#333}.post-body .hljs a{color:inherit}.post-body .hljs a:focus,.post-body .hljs a:hover{color:inherit;text-decoration:underline}mark .post-body .hljs-attr,mark .post-body .hljs-string,mark .post-body .hljs-bullet{background-color:#e67e22;color:#fff}.post-body .hljs mark{background-color:#f24a4a;color:#fff;padding:2px 5px;border-radius:2px}.post-body .hljs mark span.hljs-number,.post-body .hljs mark span.hljs-comment,.post-body .hljs mark span.hljs-symbol,.post-body .hljs mark span.hljs-string,.post-body .hljs mark span.hljs-attr,.post-body .hljs mark span.hljs-keyword,.post-body .hljs mark span.hljs-name,.post-body .hljs mark span.hljs-tag{color:#fff;margin:.15rem 0}
</style>Then add the following code before </ body> or <!--</body>--></body>
<script type='text/javascript'>
//<![CDATA[
// Highlighter
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,code,kbd,blockquote,td"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var e=getSelection(),t=document.createRange();t.selectNodeContents(this),e.removeAllRanges(),e.addRange(t)},!1);
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/Arlina-Design/frame/6c8ec00f/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>After that, click the Save theme button.
How to Write Syntax Highlighter in Blog Posts
After installing the required code, then to how to write it in the post. Create a new post on your blog, then to write it add this code in the HTML tab (not compose)
<pre><code>__ADD CSS / HTML / JAVASCRIPT CODE HERE__</code></pre>Change the code marked in the code above with the CSS / HTML / JAVASCRIPT code. Especially for HTML / JAVASCRIPT code, please parse first with HTML Converter.
Following the example of writing HTML code, the HTML code that is marked is the code that you will add.
<pre><code><h1>
<span>a</span>
<span>r</span>
<span>l</span>
<span>i</span>
<span>n</span>
<span>a</span>
</br>
<span>d</span>
<span>e</span>
<span>s</span>
<span>i</span>
<span>g</span>
<span>n</span>
</h1></code></pre>As with CSS and Javascript code, how to write it is the same as the example above.
Alright, so for tips this time about How to Install Syntax Highlighter in Blog Posts. Hopefully useful and cautious.