Highlight.js SyntaxHighlighter untuk Blogger
Kang Ismet
Highlight.js untuk Blogger - Pada postingan sebelumnnya saya sudah menjelaskan tentang penggunaan PRISM SyntaxHighlighter untuk Blogger. Saat ini masih seputar syntaxhighlighter, yaitu Highlight.js dari Softwaremaniacs.
Untuk lebih aman, silahkan download JavaScriptnya DISINI, dan ikuti petunjuk yang diberikan. Apabila malas melakukan hal itu, silahkan ikuti langkah-langkah dibawah ini :
Langkah 1 : Menyimpan Link CSS dan JavaScript
Simpan kode ini di atas
Langkah 2 : Pilih CSS
Banyak pilihan CSS yang bisa digunakan, sebelum memilih silahkan lihat Demo DISINI.
Untuk Pilihan CSS, sobat bisa lihat ambil DISINI.
Untuk mengganti tampilan, perhatikan kode diatas.
Keep sharing....
Untuk lebih aman, silahkan download JavaScriptnya DISINI, dan ikuti petunjuk yang diberikan. Apabila malas melakukan hal itu, silahkan ikuti langkah-langkah dibawah ini :
Langkah 1 : Menyimpan Link CSS dan JavaScript
Simpan kode ini di atas
</head><link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/highlight.js@main/src/styles/default.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>Langkah 2 : Pilih CSS
Banyak pilihan CSS yang bisa digunakan, sebelum memilih silahkan lihat Demo DISINI.
Untuk Pilihan CSS, sobat bisa lihat ambil DISINI.
Untuk mengganti tampilan, perhatikan kode diatas.
<..../src/styles/default.css">Ganti dengan nama file yang ada di Github, misal
<..../src/styles/github.css">Atau lihat dulu DEMO, silahkan pilih.
Cara Penggunaan
Untuk menggunakan Highlight.js ini, lebih mudah daripada PRISM, kita tidak perlu menentukan bahasanya, sobat tinggal tulis seperti ini :/p>
<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>Keep sharing....
woloh syntax highlighter deui :P
aya nu request mang.... :D
Cara penulisannya memang lebih enak yang ini tidak ribut harus pakai kelas, tapi kalau prism enaknya satu klik semua kode terseleksi. Hmmm... masing2 punya kelemahan dan kelebihannya ya kang...
bisa aja kang... saya pake highlight.js ini ko
wah masih tentang syntaxhighlighter ya kang, saya jadi tahu kekurangan dan kelebihannya kang, hturnuhun
ada request soalnya kang mur.. jadi masih seputar syntaxhighlighter deh :)
kereen mas boosss mantaapp , ijin smpen dlu ajah ya mas skrip nya , hehehe .
silahhkan sob....
Makin dalam aja nih Kang untuk Css syntaxhighlihternya,sampai-sampai agak puyeng juga ini kalau ngikutin kodenya dari atas sampai kebawah.
apalagi kalau semua CSSnya dimasukin ya ;)
nahh ini ni yang saya tunggu".. thanks kang.. :)
kemana aja atuh.. telat :)
sibuk modif template kang wkwkkww :d
saya udah coba, tapi kode nya kok pada melewati batas syntax semua ya ?
melewati batas gimana maksudnya ya?
nanti takutnya jadi tidak seimbang kang, soalnya css, html, javscript dari dulu udah pakai blockquote, nanti takutnya kalo ganti jadi gak sama dengan postingan2 lawas, simak dulu aja :)
izin sedoot, tarik maaaaaaaaaaaang !! @@,
kok diblog saya gag bisa tampil ya kodenya, padahal cara penggunaannya sudah benar
biasanya tiap posting males amsuk edit html kang, tp dipikir2 perlu juga biar jelas...
hehehe.. biar gampang dibedain mana code dan bukan ya mas..
punya saya kok gagal kang? contoh -> http://berilah.blogspot.com/2013/09/cara-membuat-catatan-kaki-seo-dan.html
saya liat diblognya udah bisa ko
tapi fontnya warnanya itu aja? gk seperti kang ismet
kalau warna warni itu tergantung kode yang ditampilkan, coba test kode JavaScript yang ditampilkan, pasti lebih berwarna
Nyimak lagi Kang, Rinagan yang Mana Kang
Antara Syntax highter dengan PRISM SyntaxHighlighter?
Soalnya saya pakai, yang PRISM SyntaxHighlighter
Tapi pada kode javascript kaya nya warna code sayam
Background nya kaya nya, sama gelap Kang..?
kang kok di blog saya tidak berwarna?
Kang Ismet, mau tnya nih :D
aku ngopi css syntax highlight js di https://github.com/isagalaev/highlight.js/tree/master/src/styles kok gak jadi ya stylenya? tapi saya ngopi di blognya kang Ismet bisa, kenapa ya? ane liat di blognya kang ismet kode cssnya bnyak tulisan pre pre. tapi di github kok gak ada ya? bnyaknya hljs. Apa itu yg membuat tdk muncul stylenya, kalo iya caranya memperbaikinya gmna?
nah coba triknya mas panji, atau ganti script yang dari highlight
Kang,saya sudah ikut semua petunjuk diatas,tetapi background theme untuk highlightnya masih default template yaitu putih,gimana Kang ??
Apakah harus dipaste di atas body kang??
Kalau mau dimasukin di komentar gimana ya kang?
Misi kang saya mau nanya, kok kalau saya pake script yg diletakkan diatas head hurufnya jadi besar kecil gitu ya ?
Izin coba Kang... blum psang nch d blog saya....
Kang ada pilihan yang lainnya gak?
kang kalo saya masukin kode jquery kok gak bisa ya ? :(
Komentar ini telah dihapus oleh Unknown sebagai penulis.
ka...ko yang saya cuma sebagian saja yang ke blok tulisan ka...gimana caranya ka supaya bisa semuanya....padahal sudah pas pemasangannya.?
Izin coba, Kang..
cara nambahin javascript di template amp gimana? di tag pre, ketika double klik ke select semua kode didalam tag pre.
error terus amp javascript custom