Ads (728x90)

,

Anonymous Sunday, January 12, 2014 A+ A- Print Email
highlightjs

 Cara Pemasangan Highlight.js Syntaxhighlighter - Syntaxhighlighter sangat berguna bagi para blogger. Syntaxhighlighter berguna untuk membedakan warna - warna kode agar tidak pusing di lihat dan menambah kesan bagus pada kode yang di berikan sang author. Banyak sekali jenis - jenis Syntaxhighlighter, seperti blog saya yang memakai Syntaxhighlighter dari blog KI. Pada post saya kali ini saya akan share Syntaxhighlighter lengkap dari highlight.js.

1. Yang pertama adalah memasukan JavaScript di bawah ini
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>
2. Salin kode di atas, dan taruh tepat di atas kode </head>
3. Pilih CSS dan sisipkan di atas kode ]]></b:skin> 
Untuk CSS highlight.js syntaxhighlighternya bisa di lihat demonya di sini, dan untuk CSS-nya bisa di lihat di sini

Cara pemakaian highlight.js syntaxhighlighter cukup mudah, tinggal tulis seperti di bawah ini
<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Jika tidak mendapatkan hasil jadi, maka yang anda harus lakukan adalah merubah kode hljs menjadi kode pre

Contoh Kode - Kode yang di ubah
Contoh Kode 1 : Untuk kode seperti di bawah ini, biasanya ada di awal
/* Contoh kode 1 dari css Zenburn
*/
.hljs {


/* Contoh kode 2 dari css arta
*/
.hjls
{
ubah menjadi seperti css di bawah ini
/* Contoh kode 1 dari css Zenburn
*/
.pre code {

/* Contoh kode 2 dari css arta
*/
.pre code
{
Contoh Kode 2 : Untuk kode seperti di bawah ini biasa terdapat di pertengahan
/* Contoh kode dari css arta */

.profile .hljs-header *,
.ini .hljs-title,
.nginx .hljs-title
{
  color: #fff;
ubah kode menjadi seperti ini
/* Contoh kode dari css arta */

.pre .profile .header *,
.pre .ini .title,
.pre .nginx .title
{
  color: #fff;
Untuk seterusnya jika menemukan kode .hljs-contohkode ubah menjadi .pre .contohkode 
Contoh Kode 3 : Kode ini sama saja, tapi perbedaannya terdapat 2 atau lebih kode hljs, contoh kode .hljs-abc .def .hljs-ghj ubah menjadi .pre .abc .def. ghj 

 Contoh kode yang sudah di rubah
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;
}

 Zenburn :
/*
Zenburn style from voldmar.ru (c) Vladimir Epifanov <voldmar@voldmar.ru>
based on dark.css by Ivan Sagalaev
*/
pre code {
  display: block; padding: 0.5em;
  background: #3F3F3F;
  color: #DCDCDC;
}
pre .keyword,
pre .tag,
pre .css .class,
pre .css .id,
pre .lisp .title,
pre .nginx .title,
pre .request,
pre .status,
pre .clojure .attribute {
  color: #E3CEAB;
}
pre .django .template_tag,
pre .django .variable,
pre .django .filter .argument {
  color: #DCDCDC;
}
pre .number,
pre .date {
  color: #8CD0D3;
}
pre .dos .envvar,
pre .dos .stream,
pre .variable,
pre .apache .sqbracket {
  color: #EFDCBC;
}
pre .dos .flow,
pre .diff .change,
pre .python .exception,
pre .python .built_in,
pre .literal,
pre .tex .special {
  color: #EFEFAF;
}
pre .diff .chunk,
pre .subst {
  color: #8F8F8F;
}
pre .dos .keyword,
pre .python .decorator,
pre .title,
pre .haskell .type,
pre .diff .header,
pre .ruby .class .parent,
pre .apache .tag,
pre .nginx .built_in,
pre .tex .command,
pre .prompt {
    color: #efef8f;
}
pre .dos .winutils,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .ruby .string {
  color: #DCA3A3;
}
pre .diff .deletion,
pre .string,
pre .tag .value,
pre .preprocessor,
pre .built_in,
pre .sql .aggregate,
pre .javadoc,
pre .smalltalk .class,
pre .smalltalk .localvars,
pre .smalltalk .array,
pre .css .rules .value,
pre .attr_selector,
pre .pseudo,
pre .apache .cbracket,
pre .tex .formula,
pre .coffeescript .attribute {
  color: #CC9393;
}
pre .shebang,
pre .diff .addition,
pre .comment,
pre .java .annotation,
pre .template_comment,
pre .pi,
pre .doctype {
  color: #7F9F7F;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}

Arta :
/*
Date: 17.V.2011
Author: pumbur <pumbur@pumbur.net>
*/

.pre code
{
  display: block; padding: 0.5em;
  background: #222;
}

.pre .profile .header *,
.pre .ini .title,
.pre .nginx .title
{
  color: #fff;
}

.pre .comment,
.pre .javadoc,
.pre .preprocessor,
.pre .preprocessor .title,
.pre .pragma,
.pre .shebang,
.pre .profile .summary,
.diff,
.pre .pi,
.pre .doctype,
.pre .tag,
.pre .template_comment,
.pre .css .rules,
.pre .tex .special
{
  color: #444;
}

.pre .string,
.pre .symbol,
.pre .diff .change,
.pre .regexp,
.pre .xml .attribute,
.pre .smalltalk .char,
.pre .xml .value,
.pre .ini .value,
.pre .clojure .attribute,
.pre .coffeescript .attribute
{
  color: #ffcc33;
}

.pre .number,
.pre .addition
{
  color: #00cc66;
}

.pre .built_in,
.pre .literal,
.pre .vhdl .typename,
.pre .go .constant,
.pre .go .typename,
.pre .ini .keyword,
.pre .lua .title,
.pre .perl .variable,
.pre .php .variable,
.pre .mel .variable,
.pre .django .variable,
.css .funtion,
.smalltalk .method,
.pre .hexcolor,
.pre .important,
.pre .flow,
.pre .inheritance,
.pre .parser3 .variable
{
  color: #32AAEE;
}

.pre .keyword,
.pre .tag .title,
.pre .css .tag,
.pre .css .class,
.pre .css .id,
.pre .css .pseudo,
.pre .css .attr_selector,
.pre .lisp .title,
.pre .clojure .built_in,
.pre .winutils,
.pre .tex .command,
.pre .request,
.pre .status
{
  color: #6644aa;
}

.pre .title,
.pre .ruby .constant,
.pre .vala .constant,
.pre .parent,
.pre .deletion,
.pre .template_tag,
.pre .css .keyword,
.pre .objectivec .class .id,
.pre .smalltalk .class,
.pre .lisp .keyword,
.pre .apache .tag,
.pre .nginx .variable,
.pre .envvar,
.pre .bash .variable,
.pre .go .built_in,
.pre .vbscript .built_in,
.pre .lua .built_in,
.pre .rsl .built_in,
.tail,
.pre .avrasm .label,
.pre .tex .formula,
.pre .tex .formula *
{
  color: #bb1166;
}

.pre .yardoctag,
.pre .phpdoc,
.pre .profile .header,
.pre .ini .title,
.pre .apache .tag,
.pre .parser3 .title
{
  font-weight: bold;
}

.coffeescript .javascript,
.javascript .xml,
.pre .tex .formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.pre .xml .cdata
{
  opacity: 0.6;
}

.pre,
.javascript,
.css,
.xml,
.pre .subst,
.pre .diff .chunk,
.pre .css .value,
.pre .css .attribute,
.pre .lisp .string,
.pre .lisp .number,
.pre .tail .params,
.pre .container,
.haskell *,
.erlang *,
.erlang_repl *
{
  color: #aaa;
}

Mudah - mudahan post saya dapat menjadi media pembelajaran bagi sahabat blogger semua