Membuat Syntax Highlighter Blogger

Mempercantik postingan blogger dengan syntax highlighter. DEMO Stepnya adalah : Masuk editor template blogger anda keudian cari </style> atau ]]></b:skin> Kemudin letakan kode di bawah ini tepat di atasnya

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

Letakan juga kode di bawah ini di atas </style> atau ]]></b:skin>

.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 0px -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 }

Kemudian letakan kode di bawah ini tepat di atas </body>

<script type="text/javascript" src='https://ngudang-projectt.googlecode.com/svn/trunk/syntax-highlighter.js'></script>

Save template anda. Untuk cara memanggil css dan javascript di atas di dalam postingan and tinggal memilih mana yang sesuai dengan apa yang anda posting karena memakai class sendiri. JAVASCRIPT 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' Masing-masing pemangginya ada di bawah ini, tinggal mana yang akan anda tuliskan.

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

Yang perlu di perhatikan !! Ketika kita menulis kode HTML yang di bungkus <pre><code> dan </pre></code> dan anda harus PARSE kode yang akan di letakan di dalam pembungkus <pre><code> dan </pre></code> terlebih dahulu agar tidak terjadi kesalahan, karena <pre><code> dan </pre></code> sebagai pemanggilnya juga menggunakan HTML. Demikian semoga bermanfaat.

Baca Juga

Related Posts