Make Your Own Syntax Highlighter on Blogger

On the website, to include programming code such as CSS, HHTML, JavaScript, JQuery, C ++ or the other, you should use the Syntax Highlighter for explaining to the readers of your website in order to more easily understand the code and easy to copy the code.

Website to be Slow

Yes indeed, your website will be slower; if you use the Syntax Highlighter Online as a source of the website code and not made inline, then your website will decrease the speed, so that it will interfere with the performance of your SEO friendly website; especially in the online source many facilities that actually rarely used, so the website file size becomes very big.

Make Your Own Syntax Highlighter

It's easy to install Syntax Highlighter into your website, I will give a simple example in applying Syntax Highlighter into your blog; in this example I use blogger. It's easy and simple as the following:

CSS

Open Blogger > Template > Click Edit HTML
Copy and Paste the code below before </head> tag

<style>
/* CSS Simple Pre Code */
pre {
    background: #fff;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
}

pre.code {
    margin: 20px 25px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
}

pre.code label {
    font-family: sans-serif;
    font-weight: normal;
    font-size: 13px;
    color: #444;
    position: absolute;
    left: 1px;
    top: 16px;
    text-align: center;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
}

pre.code code {
    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
    display: block;
    margin: 0 0 0 60px;
    padding: 15px 16px 14px;
    border-left: 1px solid #d9d9d9;
    overflow-x: auto;
    font-size: 13px;
    line-height: 19px;
    color: #444;
}

pre::after {
    content: "double click to selection";
    padding: 0;
    width: auto;
    height: auto;
    position: absolute;
    right: 18px;
    top: 14px;
    font-size: 12px;
    color: #aaa;
    line-height: 20px;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    transition: all 0.3s ease;
}

pre:hover::after {
    opacity: 0;
    visibility: visible;
}

pre.code-css code {
    color: #0288d1;
}

pre.code-html code {
    color: #558b2f;
}

pre.code-javascript code {
    color: #f57c00;
}

pre.code-jquery code {
    color: #78909c;
}
</style>

JavaScript

Copy and Paste the code below before </body> tag

<script type='text/javascript'>
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>

The above script function for automatically selecting each perform double-click on the area of pre tag, kbd, and blockquote.

Post

To display Syntax Highlighter into your article, your blog post that you create using a format like the example below:

<pre class='code code-html'><label>HTML</label><code>
... HTML code (which has been parsed) here ...
</code></pre>

<pre class='code code-css'><label>CSS</label><code>
... CSS code (which has been parsed) here ...
</code></pre>

<pre class='code code-javascript'><label>JS</label><code>
... JavaScript code (which has been parsed) here ...
</code></pre>

<pre class='code code-jquery'><label>Jquery</label><code>
... JQuery code (which has been parsed) here ...
</code></pre>

Important to note!; code to be displayed as syntax highlighter should be parsed by XML Escape, for do this you can use online formater like freeformatter.com.

In the example above Syntax Highlighter is limited for the type of HTML, CSS, JAVASCRIPT and JQUERY; using a white background color. You can change according to your favorite color with the edit CSS code.

What is certain in making Syntax Highlighter itself Inline into your website / blog, acceleration speed access your website does not have much effect; so as not to damage your SEO friendly website which has been prepared carefully. Good luck!

Author : Nurdin Budi Mustofa

I am an ordinary person who works as a programmer and wants to be honest. Be strong, be fearless, be beautiful, be calm - -And believe that anything is possible when you have the right people there to support you.