Author : UnknownTidak ada komentar
kalongganteng.com - Cara Mudah Membuat Syntax Highlighter di Blog/Blogger | Sebelumnya apakah sobat sudah tau apakah Syntax Highlighter itu? Syntax Highlighter adalah fitur editor yang menampilkan teks, terutama pada teks yang berupa kode (HTML, CSS, JAVASCRIPT, JQUERY) dalam berbagai macam warna dan huruf yang berbeda sesuai dengan jenis kode itu sendiri yang fungsinya supaya mudah dimengerti. Syntax Highlighter ini biasaya digunakan untuk bahasa pemrograman web maupun aplikasi.
 |
| Screenshot Syntax Highlighter di Blogger |
Dengan menambahkan syntax highlighter di blogger memang akan membuat blog menjadi lebih keren dan terlihat profesional. Secara default untuk share kode-kode pemrograman di template blog bawaan kita biasanya menggunakan Blockquote dengan tampilan biasa tetapi dengan adanya syntax highlighter membuat kode pemrograman yang hendak kita share menjadi lebih menarik dan mudah dipahami. Agar tidak penasaran lagi silahkan ikuti tutorial cara mudah membuat Syntax Highlighter di Blog dibawah ini.
1. Pastikan sobat sudah login ke Blogger.com
2. Pilih Template => lalu klik Edit HTML
3. Sekarang cari kode ]]></b:skin> atau </style> (gunakan Ctrl+F untuk memudahkan pencarian)
/* Syntax Highlighter */
pre,i[rel="pre"]{padding:.8em 1em;margin:0;background-color:#151919;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/AVvXsEi_Ds20Z8JTPa3klDhe61PFVN6_x_WWrQzioHZD0nRQkZlyVd4LZzxVBVWVo6RENLck5BUbFJ5lD5lHMacRsJ82XvpNpawcsSnL9TR486g6VZVC0SL_GwEbIGKA_axugeLG9xzyBajSy6c/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:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
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:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
4. Copy dan paste kode CSS dibawah ini tepat diatas kode ]]></b:skin> atau </style>
5. Sekarang cari kode </head>
6. Langkah terakhir copy dan paste kode JAVASCRIPT dibawah ini tepat diatas kode </head>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>
Sampai tahap ini sobat telah menanamkan CSS dan Javascript Syntax Highlighter yang nantinya akan dipakai saat akan posting. Lalu bagaimanakah cara menggunakan Syntax Highlighter di Blogger? Caranya cukup mudah silahkan simak Cara Penggunaan Syntax Highlighter di Blogger untuk tutorial lengkapnya+gambar.
Artikel Terkait
Posted On : Minggu, 21 Desember 2014Time : 09.12
