Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter)

Text Warna-Warni pada Kode Script di Postingan (SyntaxHighlighter) - Text warna warni text warna warni, itulah yang sering dilontarkan dan ditanyakan oleh Blogger awam menyerupai saya, terkadang ada yang bertanya : "Bagaimana sih, cara menciptakan text yang berwarna-warni pada postingan, blog saya ini kan wacana tutorial blogger, saya sering melihat text warna-warni ini disetiap blog-blog tutorial, saya ingin menyerupai itu.", bekerjsama gampang saja untuk menciptakan text warna-warni ini, yang disebut SyntaxHighlighter.

Untuk menciptakan SyntaxHighlighter ini membutuhkan kode pre bukan blockquote , lantaran saya sering melihat isyarat script pada blog-blog tutorial lainnya yang memakai  blockquote bukan  pre jika sahabat bertanya mengapa lebih baik  pre dibandingkan blockquote , lihatlah tutorial Kang Ismet DISINI.

Ok eksklusif saja kita masuk ke tahap:

Cara Membuat SyntaxHighlighter

Kali ini saya menciptakan tutorial mengenai SyntaxHighlighter.js bukan Prism, disebabkan lantaran untuk SyntaxHighlighter lebih gampang caranya dibandingkan dengan Prism, dan supaya sanggup digunakan pada kolom komentar.

Langkah 1 : Masukan Javascript

Simpan script berikut di atas </head>

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

Langkah 2 : Masukan CSS

Banyak pilihan CSS yang sanggup sahabat digunakan, sebelum memilihnya silahkan lihat Demo DISINI.
Untuk Pilihan CSS, sanggup sahabat ambil DISINI.

Simpan isyarat CSS tadi diatas ]]><b:skin> atau sahabat sanggup gunakan CSS dibawah ini, yang saya sanggup dari Kang Ismet, silahkan dicoba:

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

Jika sahabat tidak puas dengan style pre diatas sanggup sahabat pilih DISINI

Cara Penggunaan

Untuk memakai SyntaxHighlighter ini pada postingan, tulis menyerupai ini:

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




Sekian dari saya, selamat mencoba dan semoga berhasil yah. Wassalam.

Tweet

Subscribe to receive free email updates: