Syntax Highlighter untuk Kode Syntax di Blogger

Syntax Highlighter untuk Kode Syntax di Blogger

Dalam posting kali ini saya akan membahas mengenai cara memasang syntax highlighter di blogger. Apa itu syntax highlight? Sobat pasti pernah melalukan edit HTML di blog sobat, perhatikan kode-kode HTML yang ada di blog sobat, bukankah kode-kode tersebut (disebut syntax) berwarna-warni!? Nah, pewarnaan pada syntax itu disebut syntax highlight. Sekarang kita akan membuat kode yang dituliskan di blog kita berwarna-warni juga.

Langkah Pertama

Pertama-tama tambahkan kode javascript berikut ini di atas </body>.

<script src='https://cdn.statically.io/gh/maringngerrang/js/master/hilight.js'/>
    <script>
      hljs.initHighlightingOnLoad();
</script>

Langkah Kedua

Selanjutnya kita akan menambahkan kode CSSnya. Ada beberapa jenis warna untuk syntax highlighter, sobat bisa memilih warna sesuai dengan yang sobat inginkan pada link berikut. Tetapi untuk melihat hasilnya sebelum terpasang di blog sobat, silahkan lihat demo berikut.

Langkah ketiga

Setelah menemukan kode CSS yang sobat inginkan, pasang kode tersebut di blog sobat, letakkan kode CSSnya diatas ]]></b:skin>. Berikut ini saya tampilkan dua contoh kode CSS yang bisa sobat pasang.

Kode CSS

/*
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;
}

Penggunaannya

Nah selanjutnya untuk cara penggunaan syntax highlighter teman-teman bisa memasangnya dengan menggunakan kode berikut ini:

<pre><code><!-- masukkan kode di sini --></code></pre>

Perhatikan bahwa kode yang dimasukkan harus telah dikonversi menjadi karakter entities. Jadi untuk simbol < harus ditulis dengan &lt; anda bisa mengkonversi kode di sini.

Mungkin cukup sekian, jika ada yang ingin sobat tanyakan, silahkan sampaikan pada kotak komentar dibawah atau bisa juga melalui halaman Contact yang bisa dibuka di menu blog dibagian paling atas. Terima kasih.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel