Cara Memasang Syntax Highlighter di Blog, pasti Anda sudah tidak asing lagi dengan tampilan seperti ini bukan? dimana Syntax Highlighter sudah banyak terpasang di blog-blog yang berbau tutorial.Syntax Highlighter itu sendiri adalah fitur editor teks yang menampilkan teks, terutama teks yang berupa code dalam berbagai macam warna dan huruf yang berbeda sesuai dengan jenis kode itu sendiri. Fitur syntax highlighter sangat cocok digunakan untuk kode pemrograman atau bahasa markup karena akan lebih mudah dibaca terutama oleh manusia atau lebih mudah difahami.
Atau secara garis besar Syntax Highlighter terdiri dari dua suku kata yaitu Syntax (identitas-deskripsi code) dan Highlighter (Penanda / Pembeda), dalam pengertian secara umum Syntax adalah bentuk deskripsi suatu bahasa dalam aturan-aturan tetentu, dan dalam dunia programing syntax lebih dikenal sebagai suatu identitas atau bentuk dari suatu code tertentu seperti : syntax HTML, syntax CSS, syntax JavaScript, dan lain sebagainya, dari masing-masing syntax memiliki ciri tertentu yang lebih spesifik lagi dalam pembagian fungsi code perintah, pembahasan khusus secara detil mengenai syntax HTML, CSS,
JavaScript atau yang lain, mudah-mudahan kita dapat membahasnya di lain kesempatan, oke untuk selanjutnya mari kita kembali kepada pokok bahasan, berdasarkan keterangan yang telah disebutkan di atas maka kesimpulanya adalah Sytax Highlighter merupakan penanda dari identitas suatu code tertentu, dan mengenai fungsinya tentunya untuk mempermudah dalam mengenali identitas, perintah serta fungsi suatu code.
Sebenarnya Syntax Highlighter banyak tampilannya silahkan cari di
google.com atau Anda bisa lihat langsung pada situsnya
github.com disitu terdapat berbagai macam tampilan silahkan pilih menurut selerah Anda.
Cara memasangnyapun cukup mudah, perhatikan caranya berikut :
1. Letakkan CSS berikut di atas
]]></b:skin> atau di dalam
</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/AVvXsEitrUHaBpngvb2C4Bm6O_oZrBX4xW-JrwyK5ufl7Z9vVdSAPNmQ4Lo6vWmQpLns-FopvgJJZmg97wolKyvrmAmznjMzqU8wAOGTU48aytZbUYXezIZV9yBru-0QefEaErpQG4hFGcjmo1s/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;}
2. Letakkan script berikut tepat di atas
</head>
<script src='//googledrive.com/host/0B0gvaxdyU-3BS3E4V0VZUVAta0U' type='text/javascript'/>
<script>
hljs.initHighlightingOnLoad();
</script>
3. Untuk memanggilnya silahkan letakkan code berikut di dalam
HTMLbukan pada Compose
<pre data-codetype="CSS"><code> Teks Atau Code Disini </code></pre>
Keterangan : Code berwarna kuning silahkan diganti dengan ID masing-masing jenis code yang akan dipublish seperti CSS, HTML, JavaScript, dll.
Dan untuk mengaktifkan code di halaman komentar silahkan tambahkan kode JS berikut, tepat diatas
</body>
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
</script>