Cara Membuat Syntax Highlighter Atau Kotak Script Di Blog

Cara Membuat Syntax Highlighter Atau Kotak Script Di Blog – Pastinya kalian sudah tidak asing mengenai hal ini guys. Syntax highlighter adalah kode stabilo yang biasanya bentuknya berupa kotak yang dimana di dalamnya ada sebuah kode script. Nah syntax ini biasanya digunakan pada blog/website yang memberikan topik pembahasan mengenai cara mendesain sebuah website atau hal yang berhubungan dengan koding. Dan biasanya juga syntax highlighter akan menampilkan kode script pada halaman artikel yang dibuat.

Cara Membuat Syntax Highlighter Atau Kotak Script Di Blog

Melalui artikel ini saya akan membagikan tutorial cara memasang syntax opensource yang dikembangkan oleh alex Alex Gorbatchev. Kotak script syntax opensource ini sangat ringan dan tidak memberatkan blogspot anda lho. Jika anda berminat menerapkan dan menambahkan kotak stabilo ini pada blog anda serta menampilkannya pada postingan anda silahkan ikuti langkah pada berikut ini.

Cara membuat syntax highlighter

1. Langkah pertama pastinya anda harus masuk ke dalam dashboard blog anda.

2. Kemudian pilihlah menu Template > Edit HTML.

3. Setelah itu silahkan anda tambahkan kode script di bawah ini tepat di atas kode </head>.

<script src='http://procejct-saeful13.googlecode.com/svn/JS/SyntaxHighlighter.js' type='text/javascript'/>

4. Jika anda sudah menerapkan langkah diatas maka tambahkan juga kode script pada berikut ini tepat di atas kode </b:skin> atau </style>.


/*syntax highlighter*/
pre{padding:.8em 1em;margin:0.5em 0;background-color:#F7F7F9;border:1px solid #ddd;font-size:13px;color:#000;font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;line-height:1.4em;position:relative;white-space:pre-wrap;word-wrap:break-word;overflow:auto;max-height:200px}
code{font-family:Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace;font-size:13px;color:#d14}
pre code{padding:0!important;color:#839496;background:none!important;border:none!important;display:block}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#93a1a1;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#F5821E}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#008800}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#268bd2}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#A2886F}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#000;font-weight:bold}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#eee8d5}

Keterangan.

Nah cara menggunakan syntax atau kode stabilo ini cukup mudah sekali, cukup tambahkan kode <pre><code>masukan javascript css atau html yang sudah diparse</code></pre> pada saat anda membuat postingan baru di blog anda silahkan tambahkan kode script tersebut saat menggunakan metode HTML. Semoga bermanfaat.


Cara Membuat Syntax Highlighter Atau Kotak Script Di Blog | Akirra Lee | 4.5

Leave a Reply

Your email address will not be published.