pre, i[rel="pre"] {
display:block;
font-style:normal;
font-size:12px;
line-height:18px;
background-color:#0d0e0f;
color:#8e9081 !important;
padding:10px 12px;
border-left:4px solid #555555;
white-space:pre;
word-wrap:normal;
overflow:auto
}
pre[data-codetype="CSS"] {
border-left-color:#7B990C
}
pre[data-codetype="HTML"] {
border-left-color:#0B7E88
}
pre[data-codetype="JavaScript"] {
border-left-color:#545448
}
pre[data-codetype="JQuery"] {
border-left-color:#395540
}
pre[data-codetype="XML"] {
border-left-color:#E55E48
}
pre code {
color:inherit !important;
font-weight:normal;
display:block
}
pre.numbered {
border-left-width:4px
}
pre.numbered[data-codetype]:before {
content:attr(data-codetype);
display:block;
margin:-10px -12px 10px;
padding:5px 10px;
font-family:'Open Sans', "Segoe UI", Arial, Tahoma, sans-serif;
text-transform:uppercase;
background-color:#40627e;
color:white
}
pre.numbered[data-codetype="CSS"]:before {
background-color:#7B990C
}
pre.numbered[data-codetype="HTML"]:before {
background-color:#0B7E88
}
pre.numbered[data-codetype="JavaScript"]:before {
background-color:#545448
}
pre.numbered[data-codetype="JQuery"]:before {
background-color:#395540
}
pre.numbered[data-codetype="XML"]:before {
background-color:#E55E48
}
pre.numbered[data-codetype*="+"]:before {
content:"Kode";
background-color:#555;
}
code, pre, i[rel="code"], i[rel="pre"] {
font-style: normal;
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;
color:#805bc0
}
pre .branch-link {
border-bottom:1px dotted;
text-decoration:none !important
}
pre .comment, pre .template_comment, pre .diff .header, pre .lisp .string, pre .javadoc {
color:#93a1a1;
font-style:italic
}
pre .doctype {
color:#df7c51
}
pre .keyword, pre .css .rule .keyword, pre .winutils, pre .javascript .title, pre .method, pre .addition, pre .css .tag, pre .lisp .title {
color:#0264BE
}
pre .css .class {
color:#a7aa9b
}
pre .number, pre .command, pre .string, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
color:#628998
}
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:#86aade
}
pre .tag .title, pre .rules .property, pre .django .tag .keyword {
font-weight:bold
}
pre .attribute, pre .variable, pre .instancevar, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .label {
color:#a59355
}
pre .preprocessor, pre .pi, pre .shebang, pre .symbol, pre .diff .change, pre .special, pre .keymethods, pre .important, pre .subst, pre .cdata {
color:#b25a5a
}
pre .tag .value, pre .attr_selector, pre .javascript .literal {
color:#bfbf90
}
pre .deletion {
color:#dc322f
}
pre .tex .formula {
background:#eee8d5
}
pre .tag {
color:#a0a28b
}
pre.numbered .line-number {
display:block;
float:left;
text-align:right;
margin:-10px 12px -10px -12px;
padding:10px 12px;
background-color:#141414
}
pre.numbered .line-number span {
display:block;
position:relative;
color:#818181;
}
pre.numbered .line-number em {
font:inherit;
position:absolute;
top:-5px;
left:100%;
margin-left:15px;
background-color:#fc391e;
border-color:transparent;
color:#fff;
line-height:1;
padding:4px 5px;
display:none
}
pre.numbered .line-number em:before {
content:"";
display:block;
width:0;
height:0;
border:4px solid transparent;
border-right-color:inherit;
border-bottom-color:inherit;
position:absolute;
top:50%;
right:100%;
margin-top:-4px
}
pre.numbered .line-number span:hover em, pre.numbered .line-number span:target em {
display:block
}
pre.numbered .line-number span:target {
font-weight:bold;
background-color:#40464b;
margin:0 -12px;
padding:0 12px
}
pre.numbered .line-number span:target a {
color:#8e9081
}
pre.numbered:hover .line-number span:target em {
display:none
}
</body> Lalu masukan script di bawah ini tepat di atas kode </body><script src="https://noenk-r.googlecode.com/svn/Syntax-highlight.js"></script>
6. Kemudian simpan template sobat
Penerapannya:
Untuk menampilkan Syntaxt Highlighter tersebut gunakan mode HTML
Lalu masukkan kode Pemanggil nya dibawah ini simak baik baik ya ^_^
<pre class="numbered" data-codetype="CSS"><code>Kode CSS anda disini!</code></pre>
<pre class="numbered" data-codetype="HTML"><code>Kode HTML anda disini!</code></pre>
<pre class="numbered" data-codetype="HTML"><code>Kode HTML anda disini!</code></pre>
<pre class="numbered" data-codetype="HTML"><code>Kode HTML anda disini!</code></pre>
Nanti DEMO nya seperti dibawah ini :
<pre class="numbered" data-codetype="CSS"><code>Kode CSS anda disini!</code></pre>
<pre class="numbered" data-codetype="HTML"><code>Kode HTML anda disini!</code></pre><pre class="numbered" data-codetype="JQuery"><code>Kode JQuery anda disini!</code></pre><pre class="numbered" data-codetype="JavaScript"><code>Kode JavaScript anda disini!</code></pre><pre class="numbered" data-codetype="XML"><code>Kode XML anda disini!</code></pre>
