How to Install Syntax Highlighter in Blog Posts?

In addition to beautifying the code blocks in a blog post, the use of Syntax Highlighter makes it easier to identify statements. The effect of using Syntax Highlighter is a treat to the eyes of the visitor and on the other hand bloggers and content editors build an image of professionalism in their contents.


How to Install Syntax Highlighter in Blog Posts?

What is Syntax Highlighter?

Syntax Highlighter is a special feature of the process of transferring code of certain programming languages ​​with writing, text color, position exactly as contained in a programming language code to be moved or copied into other written forms to make it easier to read or study it.



Syntax Highlighter works almost the same as blockquote but the difference is that the text color blockquote feature is usually only one color, to change the color according to the original code, it must be done manually. So basically the Syntax highlighter will be effective in the process of making or moving it compared to the blockquote feature.

Now that you have a basic idea of what a Syntax Highlighter is, let us know how to install them.

How to Install Syntax Highlighter in Blog Posts?

Follow the steps as under:

1. Open Blogger Dashboard, head over to Themes. Click on Edit HTML button and paste the following code before </head> or &lt;/head&gt;&lt;!--<head/>--&gt

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

Note, the code I will share will work properly if the blog has added the jquery library. Examples of query libraries like this <script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
2. Then add the following code before </body> or &lt;!--</body>--&gt;&lt;/body&gt

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

3. Click  Save Theme button. You're almost done.



How to write Syntax Highlighter in Blog Posts?

After installing the above codes, create a new post on your blog, then to write it add this code in the HTML tab (not compose tab)

<pre><code>__Your HTML/JAVA/CSS CODE HERE__</code></pre>

But before that for HTML/JavaScript codes make sure to convert the codes using SCRIPT CONVERTER.

I am attaching a sample code below:

<pre><code><h1>
  <span>t</span>
  <span>e</span>
  <span>c</span>
  <span>h</span>
  <span>g</span>
  <span>y</span>
  <span>d</span>
</br>
  <span>b</span>
  <span>l</span>
  <span>o</span>
  <span>g</span>
  <span>g</span>
  <span>e</span>
  <span>r</span>
</h1></code></pre>

Same process needs to be followed for CSS codes too.

Hopefully you'll find such trick about How to Install Syntax Highlighter in Blog Posts? useful for your blog. So your love in comments below!

0 Comments

Post a Comment

Read Comment Policy before commenting.