Monday, December 7, 2015

Syntax Highlighter untuk Kode HTML/JS/CSS di Blogger

Syntax Highlighter untuk Kode HTML/JS/CSS di Blogger

Assalamualaikum warohmatullahi wabarokatu, 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://rawgit.com/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.

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

This Blog

/* HIGHLIGHT PRE CODE */
pre {
padding:.5em 1em;
margin: 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#f1f1f1;
font-size:12px;
clear:both;
border-left:3px solid #ccc;
color:#999;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:16px;
color:#ff3c00;
font-size:13.5px;
}
pre code {
display: block; padding: 0.5em;
color: #555;
}
#comments pre code {
padding: 0 !mportant;
color: #555;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: slategray;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #0077aa;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #990055;
}
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #669900;
}
pre .attribute {
color: #588400;
}
pre .rules .value{
color: #333;
}
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: #a0733f;
}
pre .deletion {
color: #905;
}
pre .tex .formula {
background: #073642;

Penggunaannya

Untuk penggunaan syntax highlight sobat bisa memasangnya dengan bentuk kode :

<pre><code>...kode anda disini...</code></pre>

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, assalamu'alaikum.

Sumber : http://blog.kangismet.net/2013/05/highlightjs-syntaxhighlighter-untuk.html
Disqus Comment
Parse Tool