Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.

Highlight.js SyntaxHighlighter untuk Blogger

Cara memasang SyntaxHighlighter HIGHLIGHT.JS dari Softwaremaniacs untuk Blogger / Blogspot.
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 </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....

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

50 komentar

1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. woloh syntax highlighter deui :P
    1. aya nu request mang.... :D
  2. 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...
    1. bisa aja kang... saya pake highlight.js ini ko
  3. wah masih tentang syntaxhighlighter ya kang, saya jadi tahu kekurangan dan kelebihannya kang, hturnuhun
    1. ada request soalnya kang mur.. jadi masih seputar syntaxhighlighter deh :)
  4. kereen mas boosss mantaapp , ijin smpen dlu ajah ya mas skrip nya , hehehe .
    1. silahhkan sob....
  5. Makin dalam aja nih Kang untuk Css syntaxhighlihternya,sampai-sampai agak puyeng juga ini kalau ngikutin kodenya dari atas sampai kebawah.
    1. apalagi kalau semua CSSnya dimasukin ya ;)
  6. nahh ini ni yang saya tunggu".. thanks kang.. :)
    1. kemana aja atuh.. telat :)
    2. sibuk modif template kang wkwkkww :d
  7. saya udah coba, tapi kode nya kok pada melewati batas syntax semua ya ?
    1. melewati batas gimana maksudnya ya?
  8. 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 :)
  9. izin sedoot, tarik maaaaaaaaaaaang !! @@,
  10. kok diblog saya gag bisa tampil ya kodenya, padahal cara penggunaannya sudah benar
  11. biasanya tiap posting males amsuk edit html kang, tp dipikir2 perlu juga biar jelas...
    1. hehehe.. biar gampang dibedain mana code dan bukan ya mas..
  12. punya saya kok gagal kang? contoh -> http://berilah.blogspot.com/2013/09/cara-membuat-catatan-kaki-seo-dan.html
    1. saya liat diblognya udah bisa ko
  13. tapi fontnya warnanya itu aja? gk seperti kang ismet
    1. kalau warna warni itu tergantung kode yang ditampilkan, coba test kode JavaScript yang ditampilkan, pasti lebih berwarna
  14. 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..?
  15. kang kok di blog saya tidak berwarna?
  16. 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?
    1. sama sob, ane juga kayak gitu. Tapi ane coba - coba ubah tulisan hjls menjadi pre. dan hasilnya jadi sob :D
    2. nah coba triknya mas panji, atau ganti script yang dari highlight
  17. 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??
  18. Kalau mau dimasukin di komentar gimana ya kang?
  19. Misi kang saya mau nanya, kok kalau saya pake script yg diletakkan diatas head hurufnya jadi besar kecil gitu ya ?
  20. Izin coba Kang... blum psang nch d blog saya....
  21. Kang ada pilihan yang lainnya gak?
  22. kang kalo saya masukin kode jquery kok gak bisa ya ? :(
  23. Unknown
    Komentar ini telah dihapus oleh pengarang.
  24. ka...ko yang saya cuma sebagian saja yang ke blok tulisan ka...gimana caranya ka supaya bisa semuanya....padahal sudah pas pemasangannya.?
  25. Izin coba, Kang..
  26. 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
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.