Cara Memasang Syntax Highlighter Pada Blog

Oleh Rafid Aslam

29 Juli 2014

Syntax highlighter bisa merubah kode menjadi berwarna, contohnya pada source code di sana sudah berwarna karena sudah dipasang syntax highlighter secara default pada browsernya. Namun syntax highlighter kali ini akan dipasang di blog. Para pemilik blog yang mempunyai tutorial blogger pasti sudah tidak asing lagi dengan syntax highlighter ini. Syntax highlighter juga berfungsi agar manusia bisa belajar kode-kodenya dengan pas. Syntax highlighter dapat membuat blog anda menjadi berwarna dan terlihat profesional.

Kali ini saya menggunakan salah satu syntax highlighter yaitu Highlight.js, karena penggunaanya lebih mudah daripada menggunakan syntax highlighter yang PRISM.

Langkah pertama: Memasang JavaScript

Silahkan anda simpan javascript di bawah ini di atas kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Langkah kedua: Memilih CSS

Anda bisa memilih CSS sesuai selera anda, sebelum memilih anda dapat melihat demonya di sini http://highlightjs.org/static/test.html , lalu pilih CSSnya di sini https://github.com/isagalaev/highlight.js/tree/master/src/styles

 Jika anda tidak mau memilih, letakkan kode CSS di bawah ini di atas kode </style> atau ]]></b:skin>

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

Cara penggunaannya

Untuk menggunakan syntax highlighter ini lebih simpel dan tidak usah memilih language seperti PRISM yang ribet.

<pre><code>...Kodenya di sini gan...</code></pre>

Terimakasih sudah berkunjung di sini, bagi yang ingin minta penjelasan bisa dituliskan di kotak komentar di bawah post ini, semoga bermanfaat.

Tag : Tips Blogger

Bagikan :

Tweet