Cara Memasang Syntax Highlighter Yang Keren Di Blogger


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


Cara Memasang Syntax Highlighter Yang Keren Di Blogger


Tampilan Mobile



Cara Memasang Syntax Highlighter Yang Keren Di Blogger


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

Berlangganan update artikel terbaru via email:

2 Responses to "Cara Memasang Syntax Highlighter Yang Keren Di Blogger"
  1. Jejek Gan :)
    Ternyata Templete nya sama ye hehe (Mas Sugeng Punya)
    semoga tambah maju blognya

    BalasHapus

Jika Ada Yang Ingin Anda Tanyakan Terkait Artikel Ini Silahkan Bertanya Melalui Kolom Komentar Dibawah, Atau Dengan Menghubungi Kami Pada Halaman Contact.

1. Centang kotak Notify Me / Beri Tahu Saya untuk mendapatkan notifikasi komentar.
2. Komentar kami moderasi, dan tidak semuanya dipublish.
3. Semua komentar dengan menambahkan link akan dihapus dan tidak akan dipublikasikan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel