Hay,.. sobat FateMan Farz apa kabar semua nya,.. hehehee
sudah Lama nie saya gak memposting tutorial blog dan alhamdulillah hari ini saya di beri kesempatan untuk berbagi tutorial lagi,.. okeyy untuk postingan kali ini saya akan membahas tentang Syntaxt Higlighter.Apa itu Syntax Highlighter,?? Kita para blogger sering kali berbagi script/kode untuk blogger atau siapapun yang membutuhkannya untuk pengembangan web/blog. Kebanyakan dari kita menggunakan Tag Blockquote sebagai "wadah" dari script/kode tersebut dan menandai dengan beberapa warna khusus sebagai indikator atau petunjuk. Nah, Syntax Highlighting adalah upaya untuk mempresentasikan script/kode tersebut dengan cara dan tampilan yang lebih baik berdasarkan jenis kode, misalnya CSS, HTML, Javascript, JQuery, Phyton, PHP, XML dan masih banyak lagi.
Simak langkah2 dibawah ini:
1. Login ke akun blogger sobat2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode
]]></b:skin></style> 4. Lalu tambahkan script
atau CSS berikut ini tepat diatas kode ]]></b:skin></style> 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
}
</head> Lalu masukan script di bawah ini tepat di atas kode </head><script type='text/javascript'>'http://sites.google.com/site/vanzdy/script/Syntax-highlight.js'</script>Penerapannya:
Untuk menampilkan Syntaxt Highlighter tersebut gunakan mode HTML
Lalu masukkan kode Pemanggil nya dibawah ini simak baik baik ya ^_^ 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 CSS anda disini!</code></pre><pre class="numbered" data-codetype="jQuery"><code>Kode CSS anda disini!</code></pre><pre class="numbered" data-codetype="Xml"><code>Kode CSS anda disini!</code></pre><pre class="numbered" data-codetype="JavaScript"><code>Kode CSS anda disini!</code></pre>