Cara Memasang Syntax Highlighter Yang Keren Di Blogger

Selain untuk mempercantik tampilan barisan code di posingan blog, penggunaan Syntax highlighter juga berguna untuk memudahkan pembaca agar dapat mengenali jenis code yang ada pada postingan blog.


selain itu penggunaan syntax highligter juga dapat membuat tampilan blog terlihat lebih profesional dalam menyajikan artikel artikenya.

Syntax Highlighter sendiri merupakan teks editor yang digunakan untuk menyorot berbagai jenis bahasa pemrograman, skrip, atau markup, seperti HTML, CSS, JavaScript dan sebagainya, guna memudahkan para pengunjung untuk membaca atau mempelajarinya.

nah, pada artikel kali ini belajar ngeblog akan memberikan toturial cara memasang syntax higlighter yang Keren di blogger..

jika anda berminat untuk menggunakannya
silahkan simak tutorial berikut ini

Cara Memasang Syntax Highlighter Yang Responsive Di Blogger

Tampilan Desktop

Tampilan Mobile

1.  Masuk ke Blogger.com
2. Klik Tema > Edit HTML
3. Copy dan paste script di bawah ini tepat di atas kode ]]></b:skin> atau </style>

/* Syntax Highlighter */
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:300px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
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,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

4. terakhir klick simpan tema

Catatan : Anda bisa mengganti warna atau style dari syntax highlighter disini: https://github.com/isagalaev/highlight.js/tree/master/src/styles

Cara Menggunakan Syntax Highlighter Pada Postingan Blog

 untuk menggunakannya cukup mudah

1.   pertama tama silahkan masuk ke blogger.com
2. pada menu dasbord klick postingan > Entri Baru
3. Kemudian Masuk Ke Menu HTML Bukan Compose
4. Setelah itu Tulis <pre><code>Masukkan Kode Script Disini</code></pre>

sekarang tinggal anda lihat hasilnya

Catatan :

Jika anda ingin memasukkan script HTML atau Javascript Pada Syntax Highlighter, Silahkan Parse Terlebih Dahulu Menggunakan Tool Html Converter Agar Script Tidak Tereksekusi ( jalan ) Saat Di Masukkan Di Syntax Highlighter

Tapi kalau kode css Anda tidak perlu melakukan parse terlebih dahulu jika memungkinkan.

Penutup

Demikianlah Artikel mengenai cara memasang syntax highlighter yang Keren di blogger, semoga bermanfaat bagi anda semua.

dan jika anda memiliki pertanyaan, kritik maupun saran mengenai artikel ini silahkan kirimkan melalui kolom komentar di bawah atau bisa juga melalui halaman contact.

akhir kata
see you next time and happy blogging

Share this post

Berlangganan update artikel terbaru via email: