Cara Membuat Dan Memasang Syntax Highlighter di Blogger

Cara Membuat Dan Memasang Syntax Highlighter - Buat kalian para blogger seringkali berbagi script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog, kebanyakan dari kalian menggunakan Quote sebagai tempat/wadah dari script/kode tersebut.

Nah, Syntax Highlighter merupakan upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode. Misalkan Javascript, CSS, HTML, Phyton, PHP, Javascript, dan masih banyak lagi.

Baca Juga:

• Cara membuat artikel terkait di blogger.
• Cara membuat tombol share melayang responsive dan ringan di blog.

Biasanya di beberapa platform seperti Joomla, Drupal, dan WordPress, kita bisa menggunakan berbagai jenis modul atau plugin Syntax Highlighter siap pakai. Namun beda halnya dengan Blogger, kita harus menambahkan-nya secara manual.

Kali ini saya akan memberikan tutorial bagaimana cara memasang Syntax Highlighter pada platform Blogger. Syntax Highlighter yang saya bagikan kali ini merupakan buatan dari Arlina Design. Berikut ini merupakan cara membuat Syntax Highlighter pada Blogger atau Blogspot.

Cara Membuat Syntax Highlighter di Blogger

1. Pertama-tama kalian masuk ke Dashboard Blogger.

2. Pilih Tema > Edit HTML

3. Copy dan Paste kode dibawah ini tepat sebelum kode </head>.

<script src="https://cdn.jsdelivr.net/gh/Arlina-Design/frame@master/highlightpacks.js">
<script>hljs.initHighlightingOnLoad();</script>

4. Selanjutnya Copy dan Paste kode dibawah ini tepat sebelum kode ]]></b:skin>.

/* SOLARIZED DARK STYLE */
pre code{display:block;padding:0.5em;background:#002b36;color:#839496}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#586e75;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#859900}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#2aa198}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#b58900}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title{color:#cb4b16}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}

5. Simpan Tema.

Cara Memasang Syntax Highlighter di Blogger

Setelah kalian memasang kode untuk Syntax Highlighter di template Blog, untuk memanggilnya atau memasang Syntax Highlighter pada postingan Blog, Caranya seperti dibawah ini.

1. Buat postingan baru kalian di Blog.

2. Masukkan kode dibawah ini di postingan kalian, caranya pindah penulisan dari Compose ke HTML.

<pre><code>
Isikan Kode jQuery atau Javascript atau Kode CSS atau Kode HTML kalian disini
</code></pre>

Note: Sebelumnya kode kalian harus di parse terlebih dahulu. Untuk parse kode, bisa kalian kunjungi http://www.htmlparse.com/.

3. Jika sudah silahkan kalian publikasikan postingan kalian.

Gimana mudah bukan? Itulah cara membuat Syntax Highlighter pada postingan Blog. Jika kalian belum mengerti bisa berkomentar dibawah. Untuk DEMO Syntax Highlighter yang saya bagikan ini, tampilannya akan seperti Syntax Highlighter yang saya pakai sekarang. Sekian dari saya semoga bermanfaat bagi kalian. Semoga berhasil!

Syahrul

Seorang remaja yang berbagi pengalaman

Share this post