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.highlight js

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 JavaScript

Simpan JavaScript ini di atas </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </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.

Simpan CSS tersebut di atas ]]></b:skin>, atau sobat bisa gunakan 2 CSS yang saya ambil dari Github.

Default


/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
*/
pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
  color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
  color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
  color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
  color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
  color: #88F
}
pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
  font-weight: bold;
}
pre .asciidoc .emphasis,
pre .markdown .emphasis {
  font-style: italic;
}
pre .nginx .built_in {
  font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .lasso .markup,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

Zenburn


/*
Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
based on dark.css by Ivan Sagalaev
*/
pre code {
  display: block; padding: 0.5em;
  background: #3F3F3F;
  color: #DCDCDC;
}
pre .keyword,
pre .tag,
pre .css .class,
pre .css .id,
pre .lisp .title,
pre .nginx .title,
pre .request,
pre .status,
pre .clojure .attribute {
  color: #E3CEAB;
}
pre .django .template_tag,
pre .django .variable,
pre .django .filter .argument {
  color: #DCDCDC;
}
pre .number,
pre .date {
  color: #8CD0D3;
}
pre .dos .envvar,
pre .dos .stream,
pre .variable,
pre .apache .sqbracket {
  color: #EFDCBC;
}
pre .dos .flow,
pre .diff .change,
pre .python .exception,
pre .python .built_in,
pre .literal,
pre .tex .special {
  color: #EFEFAF;
}
pre .diff .chunk,
pre .subst {
  color: #8F8F8F;
}
pre .dos .keyword,
pre .python .decorator,
pre .title,
pre .haskell .type,
pre .diff .header,
pre .ruby .class .parent,
pre .apache .tag,
pre .nginx .built_in,
pre .tex .command,
pre .prompt {
    color: #efef8f;
}
pre .dos .winutils,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .string {
  color: #DCA3A3;
}
pre .diff .deletion,
pre .string,
pre .tag .value,
pre .preprocessor,
pre .built_in,
pre .sql .aggregate,
pre .javadoc,
pre .smalltalk .class,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .css .rules .value,
pre .attr_selector,
pre .pseudo,
pre .apache .cbracket,
pre .tex .formula,
pre .coffeescript .attribute {
  color: #CC9393;
}
pre .shebang,
pre .diff .addition,
pre .comment,
pre .java .annotation,
pre .template_comment,
pre .pi,
pre .doctype {
  color: #7F9F7F;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

Untuk CSS yang lainnya silahkan ambil dari Github.. kepanjangan sob :)

Cara Penggunaan


Untuk menggunakan Highlight.js ini, lebih mudah daripada PRISM, kita tidak perlu menentukan bahasanya, sobat tinggal tulis seperti ini :

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Keep sharing....

49 komentar

woloh syntax highlighter deui :P

Balas

aya nu request mang.... :D

Balas

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

Balas

bisa aja kang... saya pake highlight.js ini ko

Balas

wah masih tentang syntaxhighlighter ya kang, saya jadi tahu kekurangan dan kelebihannya kang, hturnuhun

Balas

ada request soalnya kang mur.. jadi masih seputar syntaxhighlighter deh :)

Balas

kereen mas boosss mantaapp , ijin smpen dlu ajah ya mas skrip nya , hehehe .

Balas

Makin dalam aja nih Kang untuk Css syntaxhighlihternya,sampai-sampai agak puyeng juga ini kalau ngikutin kodenya dari atas sampai kebawah.

Balas

nahh ini ni yang saya tunggu".. thanks kang.. :)

Balas

apalagi kalau semua CSSnya dimasukin ya ;)

Balas

kemana aja atuh.. telat :)

Balas

sibuk modif template kang wkwkkww :d

Balas

saya udah coba, tapi kode nya kok pada melewati batas syntax semua ya ?

Balas

melewati batas gimana maksudnya ya?

Balas

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 :)

Balas

izin sedoot, tarik maaaaaaaaaaaang !! @@,

Balas

kok diblog saya gag bisa tampil ya kodenya, padahal cara penggunaannya sudah benar

Balas

biasanya tiap posting males amsuk edit html kang, tp dipikir2 perlu juga biar jelas...

Balas

hehehe.. biar gampang dibedain mana code dan bukan ya mas..

Balas

mantab kang, ane udah dapat yang nyamain DTE;] solarized_dark.css :D
- Blogwalking Yuk! -

Balas

punya saya kok gagal kang? contoh -> http://berilah.blogspot.com/2013/09/cara-membuat-catatan-kaki-seo-dan.html

Balas

saya liat diblognya udah bisa ko

Balas

tapi fontnya warnanya itu aja? gk seperti kang ismet

Balas

Kalau di Chrome bisa kang, tapi kalau di Mozilla gk keluar SyntaxHighlighternya, itu kenapa yah ?, dan bagaimana caranya agar tampil di Mozilla ?

Balas

coba pakainya yang Highlight.js jangan prism

Balas

kalau warna warni itu tergantung kode yang ditampilkan, coba test kode JavaScript yang ditampilkan, pasti lebih berwarna

Balas

Sama saja kang, menggunakan Highlight.js atau Prism, tidak bisa terlihat di Mozilla, hanya muncul di Chrome :(

Balas

saya liat diblognya, kok pake blockquote lagi :D

Balas

heheh baru beberapa ajah postingan yg di modif :)

Saya dapat kabar dari Daeng Rio, katanya klw SyntaxHighlighter hanya tampil di Chrome, benarkah itu kang ?

Balas

untuk membuktikannya, buka postingan saya diFirefox.. :)

Balas

Hehehe, walaupun di Firefox tetep bisa kok SyntaxHighlighternya punya Kang Ismet :D

Balas

jadi ceritanya dia tv'y hitam putih y kang he ... gak ko sob di firefox juga work ..!! barusan saya ngetest ....

Balas

Mas Ruly, Terima Add Facebook saya :D

Balas

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..?

Balas

kang kok di blog saya tidak berwarna?

Balas

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?

Balas

sama sob, ane juga kayak gitu. Tapi ane coba - coba ubah tulisan hjls menjadi pre. dan hasilnya jadi sob :D

Balas

nah coba triknya mas panji, atau ganti script yang dari highlight

Balas

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

Balas

Kalau mau dimasukin di komentar gimana ya kang?

Balas

Wah ini kayaknya keren mas, jadi lebih jelas script yang disampaikan

Balas

Misi kang saya mau nanya, kok kalau saya pake script yg diletakkan diatas head hurufnya jadi besar kecil gitu ya ?

Balas

Izin coba Kang... blum psang nch d blog saya....

Balas

Kang ada pilihan yang lainnya gak?

Balas

kang kalo saya masukin kode jquery kok gak bisa ya ? :(

Balas
Komentar ini telah dihapus oleh pengarang.

ka...ko yang saya cuma sebagian saja yang ke blok tulisan ka...gimana caranya ka supaya bisa semuanya....padahal sudah pas pemasangannya.?

Balas

Poskan Komentar


×
Chat