Blogging, Search Engine Optimization, Internet, Template, Widget hingga Monetize Blog.

Efek Warna-Warni SyntaxHighlighter untuk Penyajian Kode

Syntaxhighlighter berfungsi untuk memberikan efek warna-warni pada script atau kode yang kita sajikan di dalam posting. Selain membuat tampilan menjadi lebih menarik, dengan adanya pembedaan warna, akan memudahkan kita dalam memahami setiap elemen pada script yang disajikan. Kita dapat membedakan mana css, javascript, html, atribut, tag dan lain-lain.

Untuk dapat menerapkan syntaxhighlighter ini, saat menyajikan kode atau scipt di dalam posting kita harus menggunakan tag pre. Jika kamu sebelumnya menggunakan tag blockquote atau yang lainya saat menyajikan kode atau script, maka kali kini jangan menggunakan tag tersebut. Ada baiknya kamu untuk memahami cara penerapan tag blockquote dan tag pre terlebih dahulu.

SyntaxHighlighter untuk Penyajian Kode

Setelah kamu mengetahui cara penerapan tag blockquote dan tag pre, maka kamu akan lebih paham lagi dalam pemasangan efek warna-warni syntaxhighlighter pada penyajian script atau kode yang akan kita bahas kali ini.

Memasang SyntaxHighlighter untuk Penyajian Kode

Terdapat berbagai efek syntaxhighligher yang bisa kamu pilih sesuai selera masing-masing untuk diterapkan pada Blog kamu.

PRISM SyntaxHighlighter

Ada dua pilihan untuk PRISM, yaitu Light Theme dan Dark Theme. Silakan lihat live demo terlebih dahulu dan untuk penerapannya silakan ikuti langkah-langkah berikut ini.

  • Pada dashboard Blogger, silakan masuk ke bagian Template dan klik Edit HTML.
  • Selanjutnya carilah kode </body> dan letakan kode javascript berikut di atas kode </body>.
<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>

  • Kemudian carilah kode ]]></b:skin> atau </style> dan letakan kode css berikut di atas kode ]]></b:skin> atau </style>.

Jika kamu memilih Light Theme


/* Tema : LightSyntax oleh Kang Ismet
URL: http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html */ 
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Jika kamu memilih Dark Theme


/*
Tema RDark oleh DTE:] berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

  • Klik Simpan Template.
Terakhir adalah penyajian pada posting. Gunakanlah mode penulisan HTML saat menyajikan kode di dalam posting. Setiap jenis kode memiliki class yang berbeda dalam penyajiannya.
  • XML, PHP, HTML class="language-markup"
  • CSS class="language-css"
  • Javascript="language-javascript"
<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>


Highlight.js SyntaxHighlighter

Terdapat banyak pilihan pada Highlight.js. Saya hanya akan membagikan dua diantaranya, yaitu Default Theme dan Zenburn Theme. Untuk Tema lainya silakan kamu lihat di Github. Terlebih dahulu silakan lihat live demo dan untuk penerapanya silakan ikuti langkah-langkah berikut ini.

  • Pada dashboard Blogger silakan masuk ke bagian Template dan klik Edit HTML.
  • Kemudian carilah kode </head> dan letakan kode Javascript berikut di atas kode </head>.
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

  • Kemudian carilah kode ]]></b:skin> atau </style> dan letakan kode css berikut di atas kode ]]></b:skin> atau </style>.

Jika kamu memilih Default Theme


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


Jika kamu memilih Zenburn Theme


/*
Zenburn style from voldmar.ru (c) Vladimir Epifanov 
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;
}

  • Klik Simpan Template.
  • Terkahir gunakanlah mode penulisan HTML dalam penyajian kode atau script dalam posting dengan menggunakan tag berikut ini.
<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>


Kelebihan dan kekurangan pada PRISM dan Highlight.js SyntaxHighlighter

  • Pemuatan PRISM lebih ringan dari pada Highlight.js
  • Pemasangan Highlight.js lebih mudah dari pada PRISM
Demikian pembahasan tentang memberikan efek warna-warni pada penyajian script atau kode dengan SyntaxHighlighter untuk mempermudah pemahaman struktur script atau kode. Selain itu jika script yang disajikan pada posting sangat panjang, kita bisa memasang seleksi otomatis pada script atau kode untuk memudahkan pengunjung dalam menyalin script atau kode.

Artikel terkait : Efek Warna-Warni SyntaxHighlighter untuk Penyajian Kode

Artikel B-Tutorial Lainnya :

0 komentar:

Post a Comment

Copyright © 2014-2016 B-Tutorial - All Right Reserved