Tutorial Blog dan Tips AdSense

Dijual rumah di Jakarta Timur, selengkapnya klik di sini

Cara Memasang Syntax Highlighter Pada Blog

Cara Memasang Syntax Highlighter Pada Blog
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
12 Komentar untuk "Cara Memasang Syntax Highlighter Pada Blog"

Saya juga sudah memasang Syntax Highlighter versi sendiri, wajib hukumnya memasang bagi blog tutorial seperti Saya :D

wahh , ijin praktek gan :)

comment back http://www.rhizovuns.com/2014/07/cara-membuat-redirect-ctrl-u.html

nice
komen back
http://zynation.blogspot.com/

Kunjungan Balik nih...
Nice Artikel kang....

saya lebih memilih menggunakan PRISM syntax highlighter karna gak terlalu memberatkan blog walau ribet sedikit :v karna time is money hehe..

iya memang prism lebih enteng, dan cocok buat blog yang pingin ringan

Thanks tutorialnya...
Ijin sedot gan.

Saya minta agar anda tidak memakai akun Anonim untuk berkomentar, gunakan akun anonim hanya saat anda sedang dalam keadaan darurat, saya minta juga untuk tidak menggunakan kata-kata kasar dalam berkomentar. Terimakasih atas perhatiannya.