Memasang SyntaxHighlighter Untuk Blogger

Syntax Highlighter adalah fitur dari beberapa teks editor untuk menampilkan source code di dalam sebuah web atau blog. Syntax Highlighter memungkinkan kita untuk menulis source code lebih terstruktur di dalam sebuah web.

Oke untuk memasangnya langsung saja simak caranya.

Pertama, Simpan Javascript

Simpan Javascript berikut diatas </head>

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

Kedua Pilih CSS

Untuk melihat demo CSS yang ada silahkan Klik Disini

Untuk Pilihan CSS, silahkan anda kunjungi disini 

Simpan CSS tersebut di atas ]]></b:skin>


Atau bisa mengambil CSSnya yang sudah di ambil di 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;
} 

Untuk cara penggunaannya Untuk menggunakan Highlight.js ini, anda tinggal tulis seperti ini :

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

Artikel ini saya dapatkan dari Kang Ismet Keep sharing dan Terima Kasih

• Tweet
• Share
• Share
• Share
• Share

About Admin

Student and Blogger. I Love Programming

Related Post