Cara Memasang Syntax Highlighter Pada Postingan Blog - TRIK SIMPLE
Cara Memasang Syntax Highlighter Pada Postingan Blog

Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, dan font sesuai istilah kategori. Fitur ini sangat mempermudah penggunanya dalam menulis struktur kode seperti bahasa pemograman seperti CSS,JavaScript,HTML.

Dengan adanya fitur ini pengunjung blog akan lebih nyaman sob membaca isi konten blog, dan untuk pembuat bisa lebih profesional untuk membuat konten.

Syntax Highlighter untuk dibandingkan dengan Blockquote, Sytax Highlighter ini lebih efektif dalam proses pembuatan, pemindahan dibandingkan Blockquote. Cara kerjanya hampir sama..

Oke sobat TrikS kali ini saya akan memberikan tutorial Cara Memasang Syntax Highlighter Pada Postingan Blog.

Cara Memasang Syntax Highlighter Dalam Tema Blogger


Pertama-tama, sobat login terlebih dahulu ke blogger.com masuk ke TEMA > Edit HTML tambahkan kode CSS dibawah ini 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>

Kemudian tambahkan kode berikut ini sebelum kode
  </head> atau &lt;/head&gt;&lt;!--<head/>--&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>


Kalau sudah Klik Simpan pada tema.

Cara Memasang Syntax Highlighter pada postingan


Setelah sudah nerapkan kode diatas dalam tema, sekarang terapkan pada postingan sobat, buat postingan baru kemudian untuk penulisannya sobat bisa masuk ke menu HTML(bukan Compose)

<pre><code>Tulis Kode Sobat Disini</pre></code>

Silahkan sobat ganti yang tercetak warna biru dengan kode HTML,CSS dan JavaScript sobat, khusus untuk kode HTML dan JavaScript silahkan parse terlebih dahulu Klik
DISINI
untuk parse.

Untuk contohnya bisa lihat pada postingan ini.

Oke sekian yang bisa saya jelaskan tentang Cara Memasang Syntax Highlighter Pada Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.
Sumber: Arlinadzgn

Cara Memasang Syntax Highlighter Pada Postingan Blog


السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ
Cara Memasang Syntax Highlighter Pada Postingan Blog

Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan teks (Terutama Source Code) dalam berbagai warna, dan font sesuai istilah kategori. Fitur ini sangat mempermudah penggunanya dalam menulis struktur kode seperti bahasa pemograman seperti CSS,JavaScript,HTML.

Dengan adanya fitur ini pengunjung blog akan lebih nyaman sob membaca isi konten blog, dan untuk pembuat bisa lebih profesional untuk membuat konten.

Syntax Highlighter untuk dibandingkan dengan Blockquote, Sytax Highlighter ini lebih efektif dalam proses pembuatan, pemindahan dibandingkan Blockquote. Cara kerjanya hampir sama..

Oke sobat TrikS kali ini saya akan memberikan tutorial Cara Memasang Syntax Highlighter Pada Postingan Blog.

Cara Memasang Syntax Highlighter Dalam Tema Blogger


Pertama-tama, sobat login terlebih dahulu ke blogger.com masuk ke TEMA > Edit HTML tambahkan kode CSS dibawah ini 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>

Kemudian tambahkan kode berikut ini sebelum kode
  </head> atau &lt;/head&gt;&lt;!--<head/>--&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>


Kalau sudah Klik Simpan pada tema.

Cara Memasang Syntax Highlighter pada postingan


Setelah sudah nerapkan kode diatas dalam tema, sekarang terapkan pada postingan sobat, buat postingan baru kemudian untuk penulisannya sobat bisa masuk ke menu HTML(bukan Compose)

<pre><code>Tulis Kode Sobat Disini</pre></code>

Silahkan sobat ganti yang tercetak warna biru dengan kode HTML,CSS dan JavaScript sobat, khusus untuk kode HTML dan JavaScript silahkan parse terlebih dahulu Klik
DISINI
untuk parse.

Untuk contohnya bisa lihat pada postingan ini.

Oke sekian yang bisa saya jelaskan tentang Cara Memasang Syntax Highlighter Pada Postingan Blog Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.
Sumber: Arlinadzgn

وَ السَّلاَمُ عَلَيْكُمْ وَرَحْمَةُ اللهِ وَبَرَكَاتُهُ

Disqus Codes
  • To write a bold letter please use or
  • To write a italic letter please use or
  • To write a underline letter please use
  • To write a strikethrought letter please use
  • To write HTML code, please use or
    or

    And use parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Jangan Lupa Subcribe