Cara Pasang Syntax Highlight di Blogger

Marwanto606

20 Jan, 2020

Cara Pasang Sintax Highlight di Blogger - hari ini saya mau menulis tentang cara membuat snipet code yang kalian pasang di blog memiliki tampilan seperti yang ada pada software code editor seperti VScode(VisualStudioCode), Suplime Text, Atom ,DLL yang disebut juga dengan nama lain syntax highlight. Syntax Highlight pada blog tutorial coding saya rasa sangat membantu para pengunjung untuk lebih mudah dalam menyain dan membaca snipet code yang kalian ingin bagikan ke blog.

Tentunya dengan adanya syntax highlighter pengunjung dapat dengan mudah membaca code dan menyalinnya. Sebelumnya saya hanya menggunakan blockquote di beberapa tutorial yang membagikan source code di blog ini, namun untuk lebih mempermudah pembacaan code dan merapikan tampilan codenya saya juga sudah menerapkan "Prism syntax highlighter" ini di blog ini.

Brikut cara memasang Syntax Highlight di Blogger

Login ke dashbord blog kalian dan masuk ke menu Template > edit HTML
Copykan css style dibawah ini, taruh diatas code </head>

 
<style>
/* CSS Prism Syntax Highlighter */
pre{padding:40px 10px 0px 10px;margin:.5em 0;white-space:pre;word-wrap:break-word;overflow:hidden;background-color:#2c323c;position:relative;max-height:500px}
pre::before{font-size:16px;content:attr(title);position:absolute;top:0;background-color:#2c323c;padding:10px;left:0;right:0;color:#fff;text-transform:uppercase;display:block;margin:0 0 15px 0;font-weight:bold}
pre::after{content:&#39;Click To Select All&#39;;padding:2px 10px;width:auto;height:auto;position:absolute;right:8px;top:8px;color:#fff;line-height:20px;transition:all 0.3s ease-in-out}
pre:hover::after{opacity:0;top:-8px;visibility:visible}
code{font-family:Consolas,Monaco,&#39;Andale Mono&#39;,&#39;Courier New&#39;,Courier,Monospace;line-height:16px;color:#88a9ad;background-color:transparent;padding:1px 2px;font-size:12px}
pre code{display:block;background:none;border:none;color:#e9e9e9;direction:ltr;text-align:left;word-spacing:normal;padding:0 0;font-weight:bold}
code .token.punctuation{color:#ccc}
pre code .token.punctuation{color:#fafafa}
code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata{color:#777}
code .namespace{opacity:.8}
code .token.property,code .token.tag,code .token.boolean,code .token.number{color:#e5dc56}
code .token.selector,code .token.attr-name,code .token.string{color:#88a9ad}
pre code .token.selector,pre code .token.attr-name{color:#fafafa}
pre code .token.string{color:#40ee46}
code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string{color:#ccc}
code .token.operator{color:#1887dd}
code .token.atrule,code .token.attr-value{color:#009999}
pre code .token.atrule,pre code .token.attr-value{color:#1baeb0}
code .token.keyword{color:#e13200;font-style:italic}
code .token.comment{font-style:italic}
code .token.regex{color:#ccc}
code .token.important{font-weight:bold}
code .token.entity{cursor:help}
pre mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
pre code mark{background-color:#ea4f4e!important;color:#fff!important;padding:2px;border-radius:2px}
.comments pre{padding:10px 10px 15px 10px;background:#2c323c}
.comments pre::before{content:&#39;Code&#39;;font-size:13px;position:relative;top:0;background-color:#f56954;padding:3px 10px;left:0;right:0;color:#fff;text-transform:uppercase;display:inline-block;margin:0 0 10px 0;font-weight:bold;border-radius:4px;border:none}
.comments pre::after{font-size:11px}
.comments pre code{color:#eee}
.comments pre.line-numbers{padding-left:10px}
pre.line-numbers{position:relative;padding-left:3.0em;counter-reset:linenumber}
pre.line-numbers &gt; code{position:relative}
.line-numbers .line-numbers-rows{height:100%;position:absolute;pointer-events:none;top:0;font-size:100%;left:-3.5em;width:3em;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;padding:0}
.line-numbers-rows &gt; span{pointer-events:none;display:block;counter-increment:linenumber}
.line-numbers-rows &gt; span:nth-child(even) { background-color: rgba(0,0,0,0.5);}
.line-numbers-rows &gt; span:before{content:counter(linenumber);color:#999;display:block;text-align:center;transition:350ms}
pre[data-codetype=&#39;CSSku&#39;]:before{background-color:#00a1d6}
pre[data-codetype=&#39;HTMLku&#39;]:before{background-color:#3cc888}
pre[data-codetype=&#39;JavaScriptku&#39;]:before{background-color:#75d6d0}
pre[data-codetype=&#39;JQueryku&#39;]:before{background-color:#e5b460}
</style>

Lalu cek pada template kalian apakah sudah terdapat source jquery, seperti contohnya dibawah ini. Jika belum ada kalian bisa copykan source jquery ini dan taruh diatas code </head>, jika sudah ada silahkan kalian skip bagian ini.

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

Selanjutnya Copykan script dibawah ini, taruh diatas code </body>

 
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<script src='https://cdn.statically.io/gist/marwanto606/bf13fd1340cca9b25278304d31736a92/raw/a8d4524f63eb95bc6b6e300419e88d8e185887e4/prisma.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
   var pres = document.getElementsByTagName("pre");
        for (var i = 0; i < pres.length; i++) {
          pres[i].addEventListener("click", function () {
            var selection = getSelection();
            var range = document.createRange();
            range.selectNodeContents(this);
            selection.removeAllRanges();
            selection.addRange(range);
          }, false);
        }
//]]>
</script>
</b:if>

Kemudian kalian klik save template,
Sekarang untuk menampilkan prism syntax highlight kalian tinggal mencopykan script html di bawah ini ke mode html di text editor blogger.
Saat kalian menulis artikel pada mode HTML pastikan code-code yang akan kalian sisipkan ke prism syntax highlight sudah di parse (bisa menggunakan TOOL ini), tujuannya agar script yang ditulis tampil sebagai text dan tidak di eksekusi sebagai code script oleh browser.

 
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> ... Kode CSS ... </code></pre>
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> ... Kode Javascript ... </code></pre>
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"> ... kode jQuery ... </code></pre>
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> ... kode HTML ... </code></pre>

Agar mempermudah saat kalian hendak membuat post baru, dan menggunakan Sintax highlight kalian bisa menambahkan sript html diatas kedalam entri blogger. klik Setelan > klik menu Posting,komentar, dan berbagi. Pada Template Entri klik tambah. kemudian masukkan script HTML diatas kedalamnya lalu klik simpan.
Selesai.

Screenshot Hasilnya