Halaman

    Social Items

Cara Memasang Syntax Highlighter Untuk Blog

Syntax Highlighter memiliki fungsi dan manfaat yang sangat penting bagi kamu para blogger yang memiliki konten tutorial dan ingin meletakkan kode html, javascript, maupun CSS.

Dengan menggunakan syntax highlighter, pengunjung blog mu akan semakin betah dan blog mu terlihat keren. Sebenernya banyak model syntax yang bisa kamu pakai, namun saya merekomendasikan syntax highlighter karena terlihat lebih bagus dan keren.

Syntax Highlighter ini cara penggunaannya memiliki kemiripan seperti membuat kutipan atau blockquote, namun bedanya pada syntax ini terdapat banyak warna dan bukan hanya terdiri dari satu warna, sehingga lebih menarik untuk dilihat.

Syntax Highlighter menggunakan tag pre saat ingin menerapkannya, dan kode yang akan diberi tag pre harus lah di parse terlebih dahulu. Kamu bisa mengungjungi Parse HTML untuk parse kode.

Jika kamu tertarik untuk menggunakan Syntax Highlighter, silahkan ikuti tutorial di bawah ini yah :)

Cara Memasang Syntax Highlighter di Blog


Syntax Highlighter hanya bekerja jika kamu memiliki Jquery 1.7.1, jika kamu belum memiliki Jquery silahkan salin kode di bawah ini dan letakan sebelum kode

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

1. Login ke Blogger - Tema - Edit HTML - cari kode </head> atau kode
&lt;/head&gt;&lt;!--<head/>--&gt; - salin kode di bawah ini dan letakan sebelum kode tersebut.

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

2. Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; - Salin kode di bawah ini letakan sebelum kode tersebut

<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. Simpan Tema

Cara Penerapan Syntax Highlighter di Blog


1. Buat postingan baru - Pilih Tab HTML (Bukan Compose) - Salin kode di bawah ini dan masukan ke dalam postingan.

<pre><code>_KODE SCRIPT YANG SUDAH DI PARSE DI SINI_</code></pre>

3. Publikasikan

Demikian tutorial Cara Memasang Syntax Highlighter di Blog

Cara Memasang Syntax Highlighter Untuk Blog

Cara Memasang Syntax Highlighter Untuk Blog

Syntax Highlighter memiliki fungsi dan manfaat yang sangat penting bagi kamu para blogger yang memiliki konten tutorial dan ingin meletakkan kode html, javascript, maupun CSS.

Dengan menggunakan syntax highlighter, pengunjung blog mu akan semakin betah dan blog mu terlihat keren. Sebenernya banyak model syntax yang bisa kamu pakai, namun saya merekomendasikan syntax highlighter karena terlihat lebih bagus dan keren.

Syntax Highlighter ini cara penggunaannya memiliki kemiripan seperti membuat kutipan atau blockquote, namun bedanya pada syntax ini terdapat banyak warna dan bukan hanya terdiri dari satu warna, sehingga lebih menarik untuk dilihat.

Syntax Highlighter menggunakan tag pre saat ingin menerapkannya, dan kode yang akan diberi tag pre harus lah di parse terlebih dahulu. Kamu bisa mengungjungi Parse HTML untuk parse kode.

Jika kamu tertarik untuk menggunakan Syntax Highlighter, silahkan ikuti tutorial di bawah ini yah :)

Cara Memasang Syntax Highlighter di Blog


Syntax Highlighter hanya bekerja jika kamu memiliki Jquery 1.7.1, jika kamu belum memiliki Jquery silahkan salin kode di bawah ini dan letakan sebelum kode

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

1. Login ke Blogger - Tema - Edit HTML - cari kode </head> atau kode
&lt;/head&gt;&lt;!--<head/>--&gt; - salin kode di bawah ini dan letakan sebelum kode tersebut.

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

2. Cari kode </body> atau &lt;!--</body>--&gt;&lt;/body&gt; - Salin kode di bawah ini letakan sebelum kode tersebut

<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. Simpan Tema

Cara Penerapan Syntax Highlighter di Blog


1. Buat postingan baru - Pilih Tab HTML (Bukan Compose) - Salin kode di bawah ini dan masukan ke dalam postingan.

<pre><code>_KODE SCRIPT YANG SUDAH DI PARSE DI SINI_</code></pre>

3. Publikasikan

Demikian tutorial Cara Memasang Syntax Highlighter di Blog

No comments

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel