No 1 Syntax Highlighter in Blog Posts | Droidnur123

Hellow Blogger Friend to droidnur123 blog Today we will talk about "No 1 Syntax Highlighter in Blog Posts"

( 1 ) What is Syntax Highlighter in Blog Posts?

In expansion to beautifying the appearance of the code line in blog posts, the use of Syntax Highlighter is also intended for readers to easily recognize the type of code provided by the author.

 Another effect of using Syntax Highlighter is that visitors will feel more comfortable reading blog content, and for writers or blog admins it will make them more professional in presenting articles on their tutorial blogs.

( 2 ) Benefits Of Using this Syntax Highlighter in blog posts?

Syntax Highlighter is one of the special features of a process of transferring a certain programming language code with the text, text color, position exactly the same as that contained in a programming language code to be moved or copied into another written form to make it easier to read or study it.

Difference Between Syntax Highlighter and backquote?

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

Well, here Droidnur123 will provide a Quick easy tutorial on How to Install a Syntax Highlighter in a post like super awesome let's move the next step on to how to add it.

( 3 ) How to Install Syntax Highlighter in a Theme?

First, login to Blogger > Select Blog > Click the Theme menu and click the Edit HTML button next to customize > Add the CSS code below before </head> or &lt;/head&gt;&lt;!--<head/>--&gt;

Note, the code that I will share will work properly if the blog has added the jquery library. An example of a jquery library like this <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

<style type='text/css'>
/* Highlighter by droidnur123 */
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>

Next 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.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

When all prosses are done please click the Save theme button.

How to Write Syntax Highlighter in Blog Posts?

After installing the required code, then on to how to write it in the post. Create a new post on your blog, then for writing add this code in the HTML mode (not compose)

pic

<pre><code>__ADD CSS/HTML/JAVASCRIPT CODE HERE__</code></pre>

Replace the code marked in the code above with the CSS/HTML/JAVASCRIPT code. Especially for HTML/JAVASCRIPT code, please parse it first with the HTML Converter tool.

The following is an example of writing correctly HTML code, the marked HTML code is the code that you will add.

Thanks, that's it for tips this time about "No 1 Syntax Highlighter in Blog Posts." Hopefully, it's useful  | keep visiting our site.

Go to Link