3
Highlight.js Untuk Blogger - kali ini saya akan meneruskan mengenai tag pre dan cara pembuatannya. Syntax Highlighter ini berguna untuk memberi warna yang berbeda pada kode atau tulisan didalamnya (sesuai Standart)


Cara Membuat SyntaxHighlighter :

  • Simpan JavaScript ini di atas </head>

<script src="https://googledrive.com/host/0B5vUusFulDiYRG5nNEV0bFZjQUk/">
    <script>
      pre.initHighlightingOnLoad();
    </script>
    


  • Pilih CSS
Banyak pilihan CSS, silakan lihat demonya dulu DISINI
Untuk pilihan CSS, sobat bisa ambil DISINI

Simpan CSS tersebut diatas ]]></b:skin>, atau sobat bisa menggunakan CSS yang saya ambil dari GitHub.


/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev 
*/
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 Penggunaan :

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


Update : ganti hjfl menjadi pre pada CSSnya

Post a Comment Blogger

3 blogger-facebook

Test tag pre di komentar blog
<script src="https://googledrive.com/host/0B5vUusFulDiYRG5nNEV0bFZjQUk/">
<script>
pre.initHighlightingOnLoad();
</script>

tq Infonya gan, walaupun sedikit membingungkan

kalau agan mau belajar pasti nanti kedepannya pasti bisa :D

Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
Untuk pertanyaan di luar topik artikel silahkan tag [OOT]
menyisipkan kode, gunakan tag <i rel="code">KODE ANDA DI SINI...</i> atau <i rel="pre">KODE ANDA DI SINI...</i>
menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Tools Konversi

 
Top