How To Add Syntax Highlighter In Blog Post
How To Add Syntax Highlighter In Blog Post - In addition to beautifying the display of code lines in blog posts, the use of Syntax Highlighter is also intended for readers to be able to easily recognize the type of code provided by the author. The effect of using other Highlighter Syntax is that visitors will feel more comfortable reading the contents of blog content, and for writers or blog admin will make it more professional in presenting articles on their tutorial blog.
Syntax Highlighter is a special feature of a process of moving certain programming language code with text, text color, position exactly the same as that contained in a programming language code to be moved or copied into other writing form for easier reading or learning.
Syntax Highlighter works almost the same as blockquote but the difference to blockquote text color feature is usually only one color only, to change the color according to the original code must be done manually. So essentially Syntax highlighter will be effective in the process of making or removal when compared with blockquote feature.
1. Login to Blogger >> Select Blog >> Click the Theme menu >> click the Edit HTML button.
2. Then Add the CSS code below before </head> or </head><!--<head/>-->
3. Then add the following code before </body> or <!--</body>--></body>
4. Then click Save themes
After installing the required code, then to the way of writing in the post. Create a new post on your blog, then for writing add this code in the HTML tab (Not Compose)
Replace the code marked in the code above with CSS / HTML / JAVASCRIPT code. Especially for HTML / JAVASCRIPT code please parse it first with HTML Converter.
Here's an example of writing HTML code, the HTML code marked is the code you want to add.
Similar to CSS and Javascript codes, the way they are written is the same as the example above.
So for tips this time about How to add Syntax Highlighter in Blog Posts. Hopefully with a short enough article this can be useful and good luck.
Syntax Highlighter is a special feature of a process of moving certain programming language code with text, text color, position exactly the same as that contained in a programming language code to be moved or copied into other writing form for easier reading or learning.
Syntax Highlighter works almost the same as blockquote but the difference to blockquote text color feature is usually only one color only, to change the color according to the original code must be done manually. So essentially Syntax highlighter will be effective in the process of making or removal when compared with blockquote feature.
How To Add Syntax Highlighter In Blog Post
1. Login to Blogger >> Select Blog >> Click the Theme menu >> click the Edit HTML button.
2. Then Add the CSS code below before </head> or </head><!--<head/>-->
<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 fine if the blog has added a jquery library. Example jquery library like this
<script src = 'https: //ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>
3. 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>
4. Then click Save themes
How to Write Syntax Highlighter in Blog Posts
After installing the required code, then to the way of writing in the post. Create a new post on your blog, then for writing add this code in the HTML tab (Not Compose)
<pre><code>__ADD CSS / HTML / JAVASCRIPT CODE HERE__</code></pre>
Replace the code marked in the code above with CSS / HTML / JAVASCRIPT code. Especially for HTML / JAVASCRIPT code please parse it first with HTML Converter.
Here's an example of writing HTML code, the HTML code marked is the code you want to 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>
Similar to CSS and Javascript codes, the way they are written is the same as the example above.
So for tips this time about How to add Syntax Highlighter in Blog Posts. Hopefully with a short enough article this can be useful and good luck.
Post a Comment for "How To Add Syntax Highlighter In Blog Post"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog