Cara Memasang SyntaxHighlighter diBlog

Cara Memasang SyntaxHighlighter diBlog

Sebelum One-GO! membahas bagaimana Cara Memasang SyntaxHighlighter diBlog, alangkah baiknya jika sobat One-GO! membaca artikel sebelumnya yang membahas Apa itu Syntax Highlighter?, Jika sobat One-GO! sudah pada tau langsung saja kita lanjutkan bagaimana Cara Memasang SyntaxHighlighter diBlog.

Syntax Highlighter ini menggunakan Syntax Highlighter dari Software Maniacs , sama dengan yang saya gunakan pada blog ini, Hanya saja pada tampilannya mungkin yang berbeda. Script yang saya bagikan ini sudah dilengkapi dengan double click untuk copy kode nya, jadi apabila pada template sobat One-GO! sudah dilengkapi JS untuk copy kode tag pre nya, silahkan singkirkan saja kode tersebut.

Cara Pemasangan di Blogspot

• Login ke akun blogger Sobat One-GO! >> Template
• Klik Edit HTML
• Tekan Keyboard Ctrl + F Kemudian Cari kode ]]></b:skin>
• Letakkan kode CSS berikut diatas kode ]]></b:skin>

Spoiler for Code CSS Syntax Highlighter BukaTutup

 pre, i[rel="pre"] {
 display: block;
 padding: 5px .5em 5px 1em;
 font: normal normal 12px/15px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 background-color: #e6e9f1;
 border-left: 4px solid #A30000;
 position: relative;
 overflow: auto;
 word-wrap: normal;
 white-space: pre;
 ;
}
pre:hover, i[rel="pre"]:hover {
 background-color: #DDE0E7;
 ;
}
pre code {
 display: block;
 color: #111;
 font: normal normal 12px/15px "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
 letter-spacing: 0;
 white-space: pre;
 ;
}
pre[rel="HTML"], pre[data-codetype="HTML"] {
 border-left-color: #0B7E88;
 ;
}
pre[rel="CSS"], pre[data-codetype="CSS"] {
 border-left-color: #5DA028;
 ;
}
pre[rel="JavaScript"], pre[data-codetype="JavaScript"] {
 border-left-color: #40627E;
 ;
}
pre[rel="JQuery"], pre[data-codetype="JQuery"] {
 border-left-color: #40627E;
 ;
}
pre[rel="JQuery UI"], pre[data-codetype="JQuery UI"] {
 border-left-color: #40627E;
 ;
}
pre[rel="XML"], pre[data-codetype="XML"] {
 border-left-color: #C44032;
 ;
}
pre[rel*="+"], pre[data-codetype*="+"] {
 border-left-color: #0B7E88;
 ;
}
pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .lisp .string, pre .javadoc {
 color: #00BB4B;
 font-style: italic;
 ;
}
pre .keyword, pre .css .rule .keyword, pre pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title {
 color: #859900;
 ;
}
pre .number, pre .command, pre .string, pre .tag .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
 color: #A60A0A;
 ;
}
pre .title, pre .localvars, pre .function .title, pre .chunk, pre .decorator, pre .builtin, pre .built_in, pre .lisp .title, pre .identifier, pre .title .keymethods, pre .id {
 color: #103197;
 ;
}
pre .tag .title, pre .rules .property, pre .django .tag .keyword {
 font-weight: bold;
 ;
}
pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label {
 color: #0499D3;
 ;
}
pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .attr_selector, pre .important, pre .subst, pre .cdata {
 color: #cb4b16;
 ;
}
pre .deletion {
 color: #dc322f;
 ;
}
pre .tex .formula {
 background: #073642;
 ;
}
pre.numbered {
 border-left-width: 2px;
 padding-left: 1em;
 ;
}
pre .line-number, pre.numbered code {
 display: block;
 line-height: 16px;
 ;
}
pre .line-number {
 float: left;
 margin: 0 1em 0 -1em;
 color: #586E75;
 border-right: 2px solid #9B9DA1;
 text-align: right;
 min-width: 35px;
 ;
}
pre .line-number span {
 display: block;
 position: relative;
 padding: 0 .5em 0 1em;
 ;
}
pre .line-number span:nth-child(even) {
 background-color: #FAFAFA;
 ;
}
pre .line-number span em {
 position: absolute;
 bottom: -1px;
 left: 100%;
 background-color: red;
 padding: 0 2px 1px 2px;
 border: 1px solid black;
 font-style: normal;
 color: black;
 display: none;
 ;
}
pre .line-number span:hover em {
 display: block;
 ;
}
pre .line-number span:target a {
 display: block;
 color: white;
 position: relative;
 background-color: #268bd2;
 margin: 0 -.5em 0 -1em;
 padding: 0 .5em 0 0;
 ;
}
pre.numbered code span {
 line-height: 12px;
 ;
}
pre[data-codetype="HTML"] .line-number span:target a {
 background-color: #4584BE;
 ;
}
pre[data-codetype="CSS"] .line-number span:target a {
 background-color: #5DA028;
 ;
}
pre[data-codetype="JavaScript"] .line-number span:target a {
 background-color: #bbbbbb;
 ;
}
pre[data-codetype="JQuery"] .line-number span:target a {
 background-color: #7073CF;
 ;
}
pre[data-codetype="JQuery UI"] .line-number span:target a {
 background-color: #E36B23;
 ;
}
pre[data-codetype="XML"] .line-number span:target a {
 background-color: #C44032;
 ;
}
pre[data-codetype*="+"] .line-number span:target a {
 background-color: #0B7E88;
 ;
}
pre[rel], pre[data-codetype]:before {
 content: attr(data-codetype);
 display: block;
 position: static;
 top: 0;
 right: 0;
 left: 0;
 background-color: #666;
 padding: 5px 7px;
 margin: -5px -6px 0 -12px;
 font: bold 11px/20px Arial, Sans-Serif;
 color: white;
 ;
}
pre[rel="CSS"], pre[data-codetype="CSS"]:before {
 background-color: #5DA028;
 ;
}
pre[rel="JavaScript"], pre[data-codetype="JavaScript"]:before {
 background-color: #40627E;
 ;
}
pre[rel="HTML"], pre[data-codetype="HTML"]:before {
 background-color: #0B7E88;
 ;
}
pre[rel="JQuery"], pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"], pre[data-odetype="JavaScript"]:before {
 background-color: #40627E;
 ;
}
pre[rel="XML"], pre[data-codetype="XML"]:before {
 background-color: #E55E48;
 ;
}
pre[data-codetype*="+"]:before {
 background-color: #0B7E88;
 ;
}
pre .line-number span:target:before {
 content: "";
 display: block;
 height: 150px;
 margin-top: -150px;
 visibility: hidden;
 ;
} 

Setelah itu cari kode </body> , letakkan script ini diatasnya

<script type="text/javascript" src='https://googledrive.com/host/0B-GXzRKoPbNnMW01UElwUUNCR2s'></script>

Simpan Template sobat,

Cara Penggunannya

Setiap bahasa memiliki kelas sendiri sendiri.

•  Java Script  ⇒ data-codetype="JavaScript" , code class="Javascript"
• CSS  ⇒ data-codetype="CSS" , code class="CSS"
• HTML ⇒ data-codetype="HTML" , code class="HTML"
• XML ⇒ data-codetype="XML" , code class="XML"
• JQuery ⇒ data-codetype="JQuery" , code class="JQuery"

<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript di sini ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS di sini ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery di sini ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui di sini ... </code></pre>

Apabila kurang cocok dengan tema / tampilannya Syntax Highlighter ini, silahkan dimodifikasi tampilannya sesuai selera sobat. Akhirnya tutorial Cara Memasang SyntaxHighlighter diBlog selesai juga, jika sobat One-GO! ada pertanyaan silahkan berkomentar dibawah