Today, I am releasing an extremely lightweight Syntax Code Highlighter that you can use as a way to elegantly embed any type of code inside your blog posts, expanding its features by adding some CSS functions and to make things look even more appealing, that is.
Features of Syntax Code Highlighter for Blogspot
Our implementation includes the famous lightweight highlight.js script along with our own CSS code to be added to your Blogger template to enhance the look and feel of the code box inside posts and expand its functionality.- Extremely lightweight.
- Incredibly elegant and good looking content box.
- Automatically detect coding language inside the box and highlights code accordingly.
- Supports highlighting up-to 168 different languages.
- Supports "Double Click (Select All)" feature making it easy to copy content.
- Includes simple Micro Highlighter for single-line code.
- Compatible with any JS framework.
Add Syntax Code Highlighter to Blogger
From your Blogger control panel, navigate to (Template → Edit HTML) then click anywhere inside the white box and press on your keyboard (Ctrl + F), search for</head> then add this ABOVE it:<b:if cond='data:blog.pageType == "item"'>
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>
</b:if>Now that you have necessary scripts and default style for our version of this syntax code highlighter set-up, add necessary CSS changes by searching for
<style type='text/css'> then add this BELOW it.
/* iSmoothBlog Syntax Highlighter */
pre{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;white-space:pre;word-wrap:break-word;overflow-x:hidden;overflow-y:auto;background-color:#f0f0f0;position:relative;padding-top:38px;width:100%;max-height:400px;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px;}
pre::before{font-size:15px;font-weight:700;content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#79798d;display:block;margin:0;text-indent:15px;}
pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#79798d;top:0;right:0;padding:9px 14px;position:absolute}
pre code {overflow:hidden;}
.hljs {overflow-x:auto;overflow-y:hidden;padding:20px;}
code .token.important {font-weight:bold;}
code .token.entity {cursor:help;}
pre mark,code mark,pre code mark {background-color:#fff!important;color:#000!important;padding:2px;margin:0 2px;border-radius:2px;}
pre[data-codetype="CSS"]:before,pre[data-codetype="HTML"]:before,
pre[data-codetype="JS"]:before,pre[data-codetype="JQ"]:before,pre[data-codetype="BASH"]:before,pre[data-codetype="auto"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee;}
micro-code{position:relative;color:#666;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;margin:0;padding:2px 3px 2px 3px;border:0;font-size:100%;font:inherit;vertical-align:baseline;background-color:#ebedef;}
micro-code:before{position:absolute;content:'Double Click (Select)';display:table;bottom:23px;left:0;background:#4c4c4c;color:#fff;padding:4px;border-radius:2px;font-size:75%;line-height:1;opacity:0;visibility:hidden;transform:scale(0.8);z-index:2;transition:all .3s;}
micro-code:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s}
Optionally, follow the next step if you want to enable "Double Click (Select All)" feature, search for
</body> then add this ABOVE it:
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
//<![CDATA[
//Double Click (Select All)
$('i[rel="pre"]').replaceWith(function(){return $("<pre><code>"+$(this).html()+"</code></pre>")});for(var pres=document.querySelectorAll("pre,micro-code,blockquote,i"),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);
//]]>
</script>
</b:if>
Everything should now be fully configured, you are ready to include that attractive Code Content Box inside your blog posts featuring the Syntax Highlighter.
Display Syntax Code Highlighter Box in Blog Posts
First of all, you have to know that in order to particularly include (HTML, JavaScript, XML, ETC) code inside the content block you have to encode it, this process is called HTML Escape and I recommend for you to use our HTML Parser tool, it doesn't matter which HTML Escape tool you prefer to use though.How to Embed Code Inside Blog Posts
Just input that piece of code anywhere you wish in your blog posts.<pre data-codetype="auto" title="BOX-TITLE"><code>Your Code Here (Must use HTML Escape tool for common Blogger languages)</code></pre>The highlighted text and
"BOX-TITLE" should be both changed to whatever you desire, of course.How to Mark Text Inside Code Box
You just have to use those two opening<mark> and closing </mark> tags.
<div class="example">
<mark>The Text You Want to Mark Inside Code Box</mark>
</div>
This way you can highlight any (text/code) you want inside the code content box with white color.
How to Micro Highlight Single-Line Code
Inside a paragraph, include those two opening<micro-code> and closing </micro-code> tags.
<micro-code>Your single-line code (Must use HTML Escape tool for common Blogger languages)</micro-code>
This will not function with syntax highlighter, this is mostly used to draw the attention of user towards a simple piece of single-line code inside a paragraph.
That's it! What do you think about our Syntax Code Highlighter? If you have any thoughts please do not hesitate to share in the comment section below.
