This is so important if you want posting about coding syntax, so it will not affect your main index html. All blog tutorial use this kind of feature to warp their code, also my blog too.
How to Make Syntax Highlighter Code Warp
This tutorial make with Javascript so it will more easy use. Let's try and read the step bellow.
Syntax Highlighting With Defering js
1. Open your Blogger Dashboard
2. Go to Theme > Edit HTML
3. Put this code bellow before tag HTML </body>.
<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://rawgit.com/mastamvan/backup/master/syntaxmas.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script
4. And then search tag HTML </head> and put the code bellow before it.
<style type='text/css'>
pre{position:relative}
pre:before{-moz-user-select:none;font-size:15px;font-family:'Roboto,sans-serif';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{-moz-user-select:none;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[data-codetype="tamvanCSS"]:before,pre[data-codetype="tamvanHTML"]:before,pre[data-codetype="tamvanJS"]:before,pre[data-codetype="tamvanJQ"]:before{background-color:#fff;box-shadow:inset 0 0 0 1px #eee}
i.klik-url,pre,code{-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;user-select:all}
.hljs{display:block;padding:0.5em;background:#333;color:white;max-height:350px;overflow:hidden;border-radius:5px}
.hljs:hover{overflow:auto}
.hljs-name,.hljs-strong{font-weight:bold}
.hljs-code,.hljs-emphasis{font-style:italic}
.hljs-tag{color:#62c8f3}
.hljs-variable,.hljs-template-variable,.hljs-selector-id,.hljs-selector-class{color:#ade5fc}
.hljs-string,.hljs-bullet{color:#a2fca2}
.hljs-type,.hljs-title,.hljs-section,.hljs-attribute,.hljs-quote,.hljs-built_in,.hljs-builtin-name{color:#ffa}
.hljs-number,.hljs-symbol,.hljs-bullet{color:#d36363}
.hljs-keyword,.hljs-selector-tag,.hljs-literal{color:#fcc28c}
.hljs-comment,.hljs-deletion,.hljs-code{color:#888}
.hljs-regexp,.hljs-link{color:#c6b4f0}
.hljs-meta{color:#fc9b9b}
.hljs-deletion{background-color:#fc9b9b;color:#333}
.hljs-addition{background-color:#a2fca2;color:#333}
.hljs a{color:inherit}
.hljs a:focus,.hljs a:hover{color:inherit;text-decoration:underline}
</style>
How to implement Syntax Highlighter on Blog Post
Copy paste this code HTML in your Post. Remember! Make sure it is in mode HTML not Compose.
Kode Pembungkus HTML
<pre data-codetype="tamvanHTML" title="HTML">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>
Kode Pembungkus CSS
<pre data-codetype="tamvanCSS" title="CSS">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>
Kode Pembungkus Javascript
<pre data-codetype="tamvanJS" title="Javascript">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>
Kode Pembungkus jQuery
<pre data-codetype="tamvanJQ" title="JQuery">
<code>
<!--Taro Kode Kalian Disini-->
</code>
</pre>
Note : You need to parse your code before you can publish it, otherwise the code will get break. You can parse it through BlogCrowds.
Conclusion
So that is How to Make Syntax Highlighter Code Warp. I hope you can easily understanding my article.If you have question you can ask with leave comment bellow.
