Cara Menggunakan Syntax Highlighter Pada Blog
- Pada kesempatan kali ini admin Behangat.Net akan membagikan cara membuat Syntax Highlighter atau dalam bahasa Indonesia adalah Penyorot Sintaks yaitu salah satu metode yang digunakan untuk membedakan antara tulisan dan kode-kode yang ditulis dalam postingan agar lebih mudah dibedakan. Banak orang yang menamakanya dengan sintak warna warni
kode CSS
yang digunakan. Nah, keuntungan menggunakan syntax highlighter adalah kita bisa dengan mudah memasang kode-kode di dalam postingan dengan tampilan yang berbeda dan khas. Berbeda dengan kotak script pada postingan sebelumnya, syntax highlighter akan lebih menarik jika kita menggunakannya. <script src="https://cdn.rawgit.com/NegeriMakmur/js/master/syntax-highlighter.js"></script>
<script> hljs.initHighlightingOnLoad(); </script>
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;
overflow:auto;
}
pre.line-number {
background:#2f3741 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOdHU2YmR4mJmgThpyd8S9rreETvcX62iCQqokOJ9HPmc9B7hLTKrTYvOWf55hzR-usBw2ooIdbVSAJV2H_dbsW-ZAMt9RWkhxUZTQcT8dZHHOejYadwrXGknt7Tdcl2kkWolxwBdOEcU/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;
}
<script type="text/javascript">
$(';i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>
');
});
</script>
<code><pre> ...kode HTML atau JavaSript yang sudah di Parse... </pre></code>
Cara Menggunakan Syntax Highlighter Pada Blog, Jika kalian masih ada yang kurang mengerti silahkan bertanya di kolom komentar yang sudah tersedia di bawah artikel ini dan jangan lupa untuk share artikel ini agar semakin banyak orang orang yang mengetahui dan membaca karena dengan membaca kita jadi tahu.
Labels: Blog, Programmer