Cara Memasang Syntax Highlighter Di Blog

Cara Memasang Syntax Highlighter di Blog - Syntax Highlighter ialah arahan yang dipakai untuk menciptakan arahan HTML, CSS, JavaSript dan bahasa pemrograman lainnya pada postingan blog sanggup terlihat berwarna, dengan perubahan warna font sesuai dengan bahasa pemrograman tersebut.

Sebagai seorang tutorial blogger, dengan memakai fitur Syntax Highlighter ini kita sanggup dengan gampang membedakan kode-kode yang ingin kita lihat di dalamnya alasannya ialah ada perbedaan warna dari tiap-tiap arahan tersebut. Selain itu juga arahan yang ada dalam postingan blog yang kita tempatkan juga tersusun dengan rapi. Selain memudahkan kita untuk membedakan kode, fitur ini juga sangat bermanfaat bagi bagi blogger yang memiliki niche yang berbau perihal tutorial blog atau penggunaan kode-kode lainnya

Saya sendiri pun memakai fitur Syntax Highlighter ini supaya blog aku sanggup terlihat lebih rapi, kodenya terlihat lebih berwarna, lezat dipandang dan supaya sanggup terlihat lebih profesional. Bagi anda yang tertarik untuk memasangnya berikut aku akan menbagikan tutorialnya.

Cara Memasang Syntax Highlighter di Blog

1. Masuk kedalam blog anda > pilih Tema > lalu pilih Edit HTML

2. salin arahan ini dan letakkan sempurna di atas </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.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>

3. Jika sudah, selanjutnya letakkan arahan ini sempurna berada di atas </head>
atau &lt;/head&gt;&lt;!--<head/>--&gt;

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

4. Jika sudah selanjutnya pilih Simpan Tema

Cara Menggunakan Syntax Highlighter pada Postingan Blog

Jika anda sudah memasang arahan tersebut di blog anda, mana untuk menerapkannya kedalam postingan kita, berikut langkah-langkahnya.

1. Buka Postingan anda > pilih Entri Baru > pilih sajian HTML bukan Compose

2. Kemudian masukkan arahan ini di dalamnya

<pre><code>MASUKKAN-KODE-CSS-HTML-ATAU-JAVASCRIPT-DI-SINI</code></pre>

Sedangkan untuk menciptakan higlihter atau ingin menandai/ menstabilo arahan menyerupai yang aku terapakan di atas, maka sisipkan arahan ini di dalamnya

<mark>KODE-YANG-INGIN-DI-STABILO</mark>

Saya menyarankan bila menambahkan arahan HTML di dalam postingan anda, sebaiknya anda memakai tool parse HTML untuk memudahkan anda PARSE HTML

Cukup sekian tutorial dari saaya Cara Memasang Syntax Highligter di Blog, semoga tutorial ini sanggup bermanfaat bagi kita semua, Terimasih.
Sumber : Arlina Design
Sumber https://www.analisyuki.com/

Bagikan Artikel ini