Home Blogger Cara Membuat Syntax Highlighter Keren di Blogger

Cara Membuat Syntax Highlighter Keren di Blogger

131
0
Syntax Highlighter

Syntax Highlighter merupakan salah satu fitur yang biasanya digunakan untuk meletakkan kode seperti HTML, CSS, Java Script dan lain-lain.

Jika Anda sudah pernah mengunjungi blog Arlina Design. Dalam blog tersebut terdapat Syntax Highlighter yang menarik dengan latar hitam dan tulisan berwarna pada codenya.

Dengan adanya fitur yang menarik ini maka akan membuat pengunjung dengan mudah mengetahui dan melihat kode yang ada dalam postingan.

Pentingkah fitur ini? Bagi saya sangat penting!

Jika kita tidak menggunakan fitur yang satu ini maka kode yang ada dalam postingan akan terlihat seperti tulisan pada umumnya.

Ini berdampak buruk, karena dapat membuat penunjung menganggap postingan Anda berantakan atau dikira tulisan Anda tidak jelas.

Cara Membuat Syntax Highlighter di Blogger

Ada berbagai jenis syntax highlighter yang ada saat ini, begitu juga dengan tampilannya. Tapi pada dasarnya, fungsinya sama saja.

Jika Anda bingung memilih mana yang lebih bagus, maka saya sarankan untuk menggunakan dua faktor dalam memilih: Yaitu cara menggunakan dan tampilan.

Cara yang simple agar saat digunakan tidak terlalu ribet sehingga akan lebih menghemat waktu.

Kemudian usahakan agar tampilan menarik dan mudah untuk dibaca/dilihat. Agar tidak membuat mata pengunjung sakit hanya karena melihat kode yang ada dalam postingan.

Saya tahu bahwa banyak pemula yang bingung untuk memilih kode apa yang akan digunakan. Karena itu kali ini saya akan membagikan dua cara membuat syntax highlighter.

Pertama yaitu dengan cara saya dan yang kedua dengan cara Arlina Design. Ini sudah sering saya gunakan dalam beberapa blog milik saya. Dan perlu diingat bahwa cara ini hanya untuk CMS Blogger saja.

Cara pertama versi saya

1. Masuk ke Blogger.com > pilih menu Tema > lalu klik Edit HTML.

2. Kemudian copy kode di bawah ini dan letakkan di atas atau sebelum kode ]]></b:skin> atau </style>.

/* Syntax */
pre {overflow: auto;max-height: 450px;margin: 10px 0 !important;padding: 20px;}code[class*=language-],pre[class*=language-]{color:#f8f8f2;text-shadow:0 1px rgba(0,0,0,.3);font-family:Roboto,sans-serif!important;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)&gt;code[class*=language-],pre[class*=language-]{background:#272822}:not(pre)&gt;code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#f8f8f2}.namespace{opacity:.7}.token.constant,.token.deleted,.token.property,.token.symbol,.token.tag{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a6e22e}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function{color:#e6db74}.token.keyword{color:#66d9ef}.token.important,.token.regex{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}

3. Setelah itu copy kode di bawah ini dan letakkan di atas atau sebelum kode </body>.

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.5.0/prism.min.js"></script>

4. Klik Simpan.

Cara Menggunakan

5. Masuk ke menu Postingan > klik Entri baru > Letakkan kode di bawah ini pada tab HTML (bukan compose).

<pre><code class="language-css"> isi kode disini </code></pre>

Jika Anda penasaran dengan cara yang kedua, maka dapat cek di bawah ini.

Saya sendiri lebih tertarik dengan cara yang ada di Bawah ini.

Cara kedua versi Arlina Design

1. Login ke Blogger > masuk ke menu Tema > kemudian klik Edit HTML.

2. Copy kode CSS yang ada di bawah ini dan letakkan sebelum kode </head> atau &lt;/head&gt;&lt;!–<head/>–&gt;.

<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>

3. Setelah itu tambahkan kode berikut ini sebelum kode </body> atau &lt;!–</body>–&gt;&lt;/body&gt;.

<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.jsdelivr.net/gh/Arlina-Design/frame@master/highlightr.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

4. Klik Simpan.

Cara menggunakan

5. Masuk ke menu Postingan > klik Entri baru > Letakkan kode di bawah ini pada tab HTML (bukan compose).

<pre><code>TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI</code></pre>

Kerenkan panduan kali ini! Silahkan diterapkan di blog milik Anda ya. Jangan lupa untuk kunjungi kembali priant.id untuk informasi menarik tentang Blogger.

Jika masih ada pertanyaan, silahkan tanyakan melalui kolom komentar artikel di bawah ini.

Sumber:

  • taniarascia.com/adding-syntax-highlighting-to-code-snippets/
  • arlinadzgn.com/2018/06/cara-memasang-syntax-highlighter-di-blogger.html

LEAVE A REPLY

Please enter your comment!
Please enter your name here