Cara Membuat Syntax Highlighter di Blogger

Tidak Ada Tanggapan

Cara Membuat Syntax Highlighter di Blogger - Syntax Highlighter adalah sebuah fitur yang bisa kita pasang sendiri untuk menampilkan atau menyoroti teks terutama source code dalam berbagai font dan warna yang sudah disesuaikan di code CSS.

Fitur seperti ini biasanya digunakan oleh blogger yang situsnya menyediakan tutorial seputar blogger seperti arlinadesign, kompi ajaib, kangismet dan masih banyak lagi,,.

Namun sebelumnya, pasti ada yang bertanya, lalu bagaimana cara membuatnya? Cara membuatnya sangat mudah dan mudah dipahami untuk pemula seperti saya sekaligus. Tanpa basa-basi lagi,

INILAH CARANYA

1. Kunjungi blogger.com, dan login dengan akun anda.

2. Pilih template, dan pilih edit HTML.

3. Letakkan kode dibawah diatas kode </style>.

pre,i[rel="pre"] {
padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-left:4px solid #40627E;
font-size:11px;
color:#839496;
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;
line-height:1.4em;
position:relative;
white-space: pre;
word-wrap: normal;
white-space:pre;
overflow:auto
}
pre.line-number {
background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhijFCLekaPSzKeLuJFyNbSdmQIU7jp_h40dqCqa5Z54vUtq2vXnDuIV6Cx_n5N07uqChaJDTpzG5cQgukDO1y8MrNvrtpndn0f7a6Kx4I17S_JzFlWNNCecbK13WyoEEwXIDWEChLeD7w/s1600/new-line-number.png)no-repeat top left;
padding-left:54px;
border-left:none;
}
pre.line-number:after{
content:"";
width:35px;
height:8px;
background-color:#39424e;
bottom:0;
left:0;
position:absolute;
}
pre[data-codetype="CSS"]{border-left-color:#5fbbba}
pre[data-codetype="HTML"]{border-left-color:#4fc1eb}
pre[data-codetype="JavaScript"]{border-left-color:#ff6c60}
pre[data-codetype="JQuery"]{border-left-color:#99c262}
pre.line-number[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-11px -13px 10px -54px;
padding:8px 12px;
font-family:Oswald,Arial,Sans-serif;
font-size:12px;
text-transform:uppercase;
background-color:#41749f;
color:white
}
pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e}
pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb}
pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60}
pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262}
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;
}
#comments code {
color:#bbbb6d;
}
pre code {
padding:0 !important;
color: #a3a49a;
background: none !important;
border:none !important;
display:block;
}
pre .line-number {
float:left;
margin:0 1em 0 -1em;
color:#61686d;
background-color:#39424e;
text-align:right;
min-width:2.5em;
padding-right:4px;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
color: #586e75;
font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
color: #859900;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .rules .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
color: #7195a3;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl .literal,
pre .id,
pre .css .function {
color: #569dcf;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
color: #aa985a;
}
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: #509a55;
}
pre .deletion {
color: #dc322f;
}
pre .tex .formula {
background: #073642;}

4. Jika sudah, letakkan kode dibawah diatas </head>.

<script src='https://googledrive.com/host/0B8zY82qas755TXNaZ0FGWUVPSEE' type='text/javascript'/>
<script>hljs.initHighlightingOnLoad();
</script> 

5. Selesai, untuk mengaktifkan tag pre pada komentar, gunakan kode dibawah dan letakkan diatas </body>.

<script type='text/javascript'>
$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
</script>

6. Untuk penggunaan, anda cukup gunakan kode dibawah

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

Nah mungkin cukup sekian, semoga bermanfaat dan apabila terdapat salah kata mohon maafkan saya.

Untuk sumber : hollabacktexas.blogspot.com/2014/01/cara-membuat-syntax-highlighter-pada.html