Cara Memasang Syntax Highlighter di Postingan Blog

Cara Memasang Syntax Highlighter di Postingan Blog - Pada kesempatan kali ini Seopedia akan share kepada kalian Cara Memasang Syntax Highlighter di Postingan Blog Syntax Highlighter merupakan fitur khusu pemindahan kode bahasa pemrograman tertentu dengan tulisan, seperti warna, dan juga posisi sama persis dengan yang terdapat pada sebuah kode bahasa pemrograman untuk dipindahkan maupun disalin ke dalam bentuk tulisan lain agar lebih mudah dibaca dan dipelajari.

Syntax Highlighter diperuntukkan bagi blog yang membahas tutorial pemrograman agar pengunjung dapat lebih memahami sebuah kode yang diajarkan step by stepnya dan juga pengunjung agar lebih nyaman saat memcara konten blog, dan bagi penulis atau admin blog akan membuatnya lebih menjadi lebih professional dalam menyajika artikel tutorialnya.

Syntax Highlighter untuk cara kerjanya hampir sama dengan blockquote yang menjadi perbedaannya untuk fitur blockquote warna teks biasanya hanya satu warna saja, untuk merubah warnanya sesuai dengan kode aslinya harus dilakukan secara manual. Jadi sebagai intinya Syntax Highlighter akan lebiih memiliki efektif dalam proses pembuatan atau pemindahannya jika dibandingkan dengan blockquote.

Langsung saja jika sobat berminat inginmemasang Syntax Highlighterpada blog, simak tutorial dibawah ini dengan tepat.

Cara Memasang Syntax Highlighter Pada Template Blog

Pertama sobat masuk terlebih dahulu ke Blogger > Klik menu Tema > Klik Edit HTML Tambahkan kode CSS dibawah ini tepat diadat kode </head> atau </head>

Perlu diperhatikan tutorial yang saya bagikan ini akan berfungsi dengan baik jika blog sobat sudah menggunakan jquery library contoh scripnya seperti ini : <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/>

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

Kemudian tambahkan kode dibawah ini tepat diatas kode </body> atau </body>

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

Jika sudah klik tombol Simpan Tema

Cara Memasang Syntax Highlighter pada postingan

Setelah memasang kode diatas sekarang saatnya menerapkannya di postingan, buat postingan baru, perlu diingat menulis dengan mode Tampilah HTML bukan Tampilan Menulis

<pre><code>__TAMBAHKAN KODE CSS/HTML/JAVASCRIPT DI SINI__</code></pre>

Ganti yang saya tandai tersebut dengan kode HTML/CSS maupun JavaScript. Khusus untuk kode HTML dan Javascript sebelum memasang silahkan terlebih dahulu ngeparse kode tersebut di HTML Converter

Berikut adalah contoh penulisan kode HTML, yang bertanda tersebut kode yang akan ditambahkan.

<pre><code><html>
<head>
  <title>Bloggerin</title>
</head>
<body>
  <main>
    <h1>Bloggerin Indonesia</h1> 
    <h2>Gudangnya ilmu teknologi</h2>
    <p>Pusatnya tutorial blogger</p> 
    <img src="" alt=""> 
    <p></p>
  </main>
</body>
</html></code></pre>

Sama halnya dengan kode CSS maupun Javascript, cara penulisannya sama seperti contoh diatas.

Oke sekian yang bisa saya sampaikan tentang bagaimana caraCara Memasang Syntax Highlighter di Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Sumber : https://github.com/isagalaev/highlight.js