√ Cara Membuat Syntax Highlighter di Blogger - AdityaTekno

Social Items

AdityaTekno.com - Cara Membuat Syntax Highlighter di BloggerSyntax Highlighter sendiri yaitu script yang dapat membuat kode menjadi warna-warni. Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script CSS, HTML, JavaScript, jQuery dan lain sebagainya.
Cara Membuat Syntax Highlighter

Script ini biasanya untuk mempercantik tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenali jenis kode yang diberikan oleh penulis.

Efek penggunaan Syntax Highlighter lainnya yaitu pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi penulis atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Baca Juga: Cara Membuat Syntax Highlighter Mirip Google Code di Blogger

Syntax Highlighter juga merupakan fitur khusus sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajarinya.

Dan Syntax Highlighter cara kerjanya hampir sama dengan blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi, dapat disimpulkan bahwa Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Baca Juga: Cara Membuat Tampilan Night Mode di Blogger dengan Cookie

Nah, di sini saya akan memberikan tutorial cara memasang syntax highlighter di postingan seperti pada blog ini, berikut cara penambahannya.

Cara Memasang Syntax Highlighter didalam Tema


Pertama, masuk ke Blogger >> Tema >> Edit HTML. Lalu tambahkan kode CSS di bawah ini sebelum </head>
Note:
Perhatikan kode yang akan saya bagikan ini akan berfungsi dengan baik bila di blognya sudah menambahkan jquery library. Contoh jquery library seperti ini <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

<style type='text/css'>
/* Syntax 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>

Kemudian tambahkan kode berikut ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Syntax 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>

Setelah itu klik Simpan Tema.

Setelah selesai semua langkah diatas, mari lanjut ke langkah selanjutnya.

Cara Penerapan Syntax Highlighter di Postingan Blog


Setelah memasang kode yang dibutuhkan, selanjutnya ke cara penerapan atau penulisannya di dalam postingan. Buat postingan baru di blog anda terlebih dahulu, kemudian untuk penulisannya tambahkan kode ini di tab HTML (bukan compose).
<pre><code>__MASUKKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti kode yang ditandai pada kode di atas dengan kode CSS/HTML/JAVASCRIPT. Khusus untuk kode HTML/JAVASCRIPT silakan parse terlebih dahulu dengan HTML Parse.

Mudah bukan caranya, engga terlalu ribet juga kan?

Demikian tutorial Cara Membuat Syntax Highlighter di Blogger. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com

Sumber: 
https://www.arlinadzgn.com/2018/06/cara-memasang-syntax-highlighter-di-blogger.html

Cara Membuat Syntax Highlighter di Blogger

AdityaTekno.com - Cara Membuat Syntax Highlighter di BloggerSyntax Highlighter sendiri yaitu script yang dapat membuat kode menjadi warna-warni. Kode warna-warni tersebut biasa kita lihat pada blog yang berisi konten tutorial atau berbagi tips tentang blogger yang di dalamnya terdapat script CSS, HTML, JavaScript, jQuery dan lain sebagainya.
Cara Membuat Syntax Highlighter

Script ini biasanya untuk mempercantik tampilan barisan kode di postingan blog, penggunaan Syntax Highlighter juga dimaksudkan untuk pembaca agar dapat dengan mudah mengenali jenis kode yang diberikan oleh penulis.

Efek penggunaan Syntax Highlighter lainnya yaitu pengunjung akan merasa lebih nyaman membaca isi konten blog, dan bagi penulis atau admin blog akan membuatnya menjadi lebih professional dalam menyajikan artikel-artikel pada blog tutorial mereka.

Baca Juga: Cara Membuat Syntax Highlighter Mirip Google Code di Blogger

Syntax Highlighter juga merupakan fitur khusus sebuah proses pemindahan kode bahasa pemrograman tertentu dengan tulisan, warna teks, posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dalam membaca atau mempelajarinya.

Dan Syntax Highlighter cara kerjanya hampir sama dengan blockquote tetapi bedanya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi, dapat disimpulkan bahwa Syntax highlighter akan efektif dalam proses pembuatan atau pemindahannya bila dibandingkan dengan fitur blockquote.

Baca Juga: Cara Membuat Tampilan Night Mode di Blogger dengan Cookie

Nah, di sini saya akan memberikan tutorial cara memasang syntax highlighter di postingan seperti pada blog ini, berikut cara penambahannya.

Cara Memasang Syntax Highlighter didalam Tema


Pertama, masuk ke Blogger >> Tema >> Edit HTML. Lalu tambahkan kode CSS di bawah ini sebelum </head>
Note:
Perhatikan kode yang akan saya bagikan ini akan berfungsi dengan baik bila di blognya sudah menambahkan jquery library. Contoh jquery library seperti ini <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'/>

<style type='text/css'>
/* Syntax 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>

Kemudian tambahkan kode berikut ini sebelum </body>
<script type='text/javascript'>
//<![CDATA[
// Syntax 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>

Setelah itu klik Simpan Tema.

Setelah selesai semua langkah diatas, mari lanjut ke langkah selanjutnya.

Cara Penerapan Syntax Highlighter di Postingan Blog


Setelah memasang kode yang dibutuhkan, selanjutnya ke cara penerapan atau penulisannya di dalam postingan. Buat postingan baru di blog anda terlebih dahulu, kemudian untuk penulisannya tambahkan kode ini di tab HTML (bukan compose).
<pre><code>__MASUKKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti kode yang ditandai pada kode di atas dengan kode CSS/HTML/JAVASCRIPT. Khusus untuk kode HTML/JAVASCRIPT silakan parse terlebih dahulu dengan HTML Parse.

Mudah bukan caranya, engga terlalu ribet juga kan?

Demikian tutorial Cara Membuat Syntax Highlighter di Blogger. Semoga bermanfaat dan sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com

Sumber: 
https://www.arlinadzgn.com/2018/06/cara-memasang-syntax-highlighter-di-blogger.html
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo