cara memasang Syntax Highlighter Responsive di postingan blog

Selain mempercantik tampilan barisan kode di blog penggunaan Syntax Highlighter juga dimaksudkan agar pengguna blog dapat membaca dengan mudah kode yang tampil. nah kali ini admin akan memberikan cara memasang syntax highlighter pada blog dan syntax highlighter ini responsive jadi jika dibuka pada mobile atau handphone background tidak terpotong sama sekali dan syntax highlighter ini memliki warna pada setiap kodenya. ok langsung ke tutorialnya

cara memasang Syntax Highlighter Responsive di dalam tema

pertama login ke blogger > klik menu tema dan klik tombol edit html > tambahkan kode css dibawah ini sebelum/diatas </head>

/* Highlighter */
.post-body code{padding:1.2em}
.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}
.BLOG_mobile_video_class{display:none!important}.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}

lalu cari lagi kode</body> tambahkan 2 kode dibawah ini tepat diatas kode tadi yang telah kita cari

<script type='text/javascript'>         
//<![CDATA[
// Highlighter Double Click
$('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>

<script src='https://cdn.rawgit.com/galih977/prisma/d77df66d/galihhighlight.js'/>

untuk cara pemakaiannya buka postingan baru mode html jangan compose sebelum itu kamu harus parse html,css,dan javascript nya terlebih dahulu agar tidak bentrok dengan tampilan templatenya

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript hljs"> Tempatkan kode disini... </code></pre>
<pre title="JQueryku" data-codetype ="JQueryku"><code class="JQueryku"> Tempatkan kode disini... </code></pre>
<pre title="CSS" data-codetype ="CSSku"><code class="language-css hljs"> Tempatkan kode disini... </code></pre>
<pre><code class="hljs xml"> Tempatkan kode disini... </code></pre>

itu dia cara memasang syntax highlighter responsive di blog caranya cukup mudah bukan membuat syntax highlighter di blog sekian dari admin jika ada yang error saat sobat membuat nya silahkan masukan di kolom komentar

Baca Juga