Cara Buat Syntax Highligther Keren Di Blogger

Admin
Admin
Maret 15, 2020
Candil Kuya - Cara Membuat Syntax Highligther Keren Di Blogger, 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.

Untuk kalian para blogger seringkali berbagi script Atau Kode HTML DAN CSS, siapapun yang membutuhkannya untuk pengembangan Website, Biasanya menggunakan Quote sebagai tempat Ataupun wadah dari script tersebut.

Cara Membuat Syntax Highligther Keren Di Blogger


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, dan masih banyak lagi. Berikut ini merupakan cara membuat Syntax Highlighter pada Blogger atau Blogspot.

Cara Membuat Syntax Highlighter di Blogger


  • Silahkan masuk ke Dashboard Blogger.

  • Pilih Tema > Edit HTML

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


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


  • 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.
Dengan menambahkan barisan kode di atas, blogger anda sudah mampu untuk membuat syntax highlighter. Untuk membuat post dengan syntax highlighter ini, anda harus menuliskan kode anda pada tab HTML bukan pada tab Compose seperti biasanya. Cara penulisan kode dapat dilihat melalui kode di bawah ini

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

Note: Sebelum Memasang kode, kalian harus di parse terlebih dahulu. Untuk parse kode, bisa kalian kunjungi Tools Parse HTML.
×


3. Jika sudah silahkan kalian publikasikan postingan kalian.

Gimana Lur mudah Kan? Cukup Sekian Tutorial Dari Saya Tentang cara membuat Syntax Highlighter pada postingan Blog. Jika kalian belum mengerti bisa berkomentar dibawah. Untuk DEMO Syntax Highlighter yang saya bagikan ini, tampilannya Bisa Anda Lihat Syntax Highlighter yang saya pakai sekarang. Sekian dari saya semoga bermanfaat bagi kalian. Semoga berhasil!


https://www.candilkuya.com/2020/03/cara-buat-syntax-highligther-keren-di.html
×

Cara Buat Syntax Highligther Keren Di Blogger 5 out of 5
Admin