Syntax Highlighter dengan Language Autodetection

Syntax Highlighter dengan Language Autodetection



Syntax Highlighter ini menggunakan Syntax Highlighter dari Software Maniacs , sama dengan yang saya gunakan pada blog ini, Hanya pada tampilannya saja yang berbeda.
Script yang saya bagikan ini sudah dilengkapi dengan double click untuk copy kode nya, jadi apabila pada template anda sudah dilengkapi JS untuk copy kode tag pre nya, silahkan singkirkan saja kode tersebut.


Proses Instalasinya hanya membutuhkan 2 langkah saja, pertama silahkan masuk Template kemudian pilih Edit HTML, silahkan salin CSS berikut dan letakkan diatas kode </style> atau ]]></b:skin> .


pre,i[rel="pre"]{
display:block;
padding:5px .5em 5px 1em;
font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
background-color:#e6e9f1;
border-left:4px solid #A30000;
position:relative;
overflow:auto;
word-wrap:normal;
white-space:pre
}
pre:hover,i[rel="pre"]:hover {
background-color: #DDE0E7
}
pre code{
display:block;
color:#111;font:normal normal 12px/15px "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
letter-spacing:0;
white-space:pre
}
pre[rel="HTML"],pre[data-codetype="HTML"]{
border-left-color:#0B7E88
}
pre[rel="CSS"],pre[data-codetype="CSS"]{
border-left-color:#5DA028
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]{
border-left-color:#40627E
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]{
border-left-color:#40627E
}
pre[rel="JQuery UI"],pre[data-codetype="JQuery UI"]{
border-left-color:#40627E
}
pre[rel="XML"],pre[data-codetype="XML"]{
border-left-color:#C44032
}
pre[rel*="+"],pre[data-codetype*="+"]{
border-left-color:#0B7E88
}
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .lisp .string,pre .javadoc{
color:#00BB4B;font-style:italic
}
pre .keyword,pre .css .rule .keyword,pre pre .winutils,pre .javascript .title,pre .method,pre .addition,pre .css .tag,pre .lisp .title{
color:#859900
}
pre .number,pre .command,pre .string,pre .tag .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{
color:#A60A0A
}
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:#103197
}
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:#0499D3
}
pre .preprocessor,pre .pi,pre .shebang,pre .symbol,pre .diff .change,pre .special,pre .keymethods,pre .attr_selector,pre .important,pre .subst,pre .cdata{
color:#cb4b16
}
pre .deletion{
color:#dc322f
}
pre .tex .formula{
background:#073642
}
pre.numbered{
border-left-width:2px;
padding-left:1em
}
pre .line-number,pre.numbered code{
display:block;
line-height:16px
}
pre .line-number{
float:left;
margin:0 1em 0 -1em;
color:#586E75;
border-right:2px solid #9B9DA1;
text-align:right;
min-width:35px
}
pre .line-number span{
display:block;
position:relative;
padding:0 .5em 0 1em
}
pre .line-number span:nth-child(even){
background-color:#FAFAFA
}
pre .line-number span em{
position:absolute;
bottom:-1px;
left:100%;
background-color:red;
padding:0 2px 1px 2px;
border:1px solid black;
font-style:normal;
color:black;
display:none
}
pre .line-number span:hover em{
display:block
}
pre .line-number span:target a{
display:block;
color:white;
position:relative;
background-color:#268bd2;
margin:0 -.5em 0 -1em;
padding:0 .5em 0 0
}
pre.numbered code span{
line-height:12px
}
pre[data-codetype="HTML"] .line-number span:target a{
background-color:#4584BE
}
pre[data-codetype="CSS"] .line-number span:target a{
background-color:#5DA028
}
pre[data-codetype="JavaScript"] .line-number span:target a{
background-color:#bbbbbb
}
pre[data-codetype="JQuery"] .line-number span:target a{
background-color:#7073CF
}
pre[data-codetype="JQuery UI"] .line-number span:target a{
background-color:#E36B23
}
pre[data-codetype="XML"] .line-number span:target a{
background-color:#C44032
}
pre[data-codetype*="+"] .line-number span:target a{
background-color:#0B7E88
}
pre[rel],pre[data-codetype]:before {
content: attr(data-codetype);
display: block;
position: static;
top: 0;
right: 0;
left: 0;
background-color: #666;
padding: 5px 7px;
margin: -5px -6px 0px -12px;
font: bold 11px/20px Arial,Sans-Serif;
color: white;
}
pre[rel="CSS"],pre[data-codetype="CSS"]:before {
background-color: #5DA028;
}
pre[rel="JavaScript"],pre[data-codetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="HTML"],pre[data-codetype="HTML"]:before {
background-color: #0B7E88;
}
pre[rel="JQuery"],pre[data-codetype="JQuery"]:before, pre[rel="JavaScript"],pre[data-odetype="JavaScript"]:before {
background-color: #40627E;
}
pre[rel="XML"],pre[data-codetype="XML"]:before {
background-color: #E55E48;
}
pre[data-codetype*="+"]:before {
background-color: #0B7E88;
}
pre .line-number span:target:before{
content:"";
display:block;
height:150px;
margin-top:-150px;
visibility:hidden
}


Setelah itu cari kode </body> , letakkan script ini diatasnya .


<script type="text/javascript" src='https://ngudang-projectt.googlecode.com/svn/trunk/syntax-highlighter.js'></script>


Simpan Template anda,

Cara Penggunannya


Setiap bahasa memiliki kelas sendiri sendiri.

  • Java Script  ⇒ data-codetype="JavaScript" , code class="Javascript"
  • CSS  ⇒ data-codetype="CSS" , code class="CSS"
  • HTML ⇒ data-codetype="HTML" , code class="HTML"
  • XML ⇒ data-codetype="XML" , code class="XML"
  • JQuery ⇒ data-codetype="JQuery" , code class="JQuery"


<pre class="numbered" data-codetype="JavaScript"><code class="Javascript"> ... kode Javascript di sini ... </code></pre>
<pre class="numbered" data-codetype="CSS"><code class="CSS"> ... kode CSS di sini ... </code></pre>
<pre class="numbered" data-codetype="HTML"><code class="HTML"> ... kode HTML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery"><code class="JQuery"> ... kode JQuery di sini ... </code></pre>
<pre class="numbered" data-codetype="XML"><code class="XML"> ... kode XML di sini ... </code></pre>
<pre class="numbered" data-codetype="JQuery Ui"><code class="JQuery Ui"> ... kode JQuery Ui di sini ... </code></pre>


Apabila kurang cocok dengan tema / tampilannya Syntax Highlighter ini, silahkan dimodifikasi tampilannya sesuai selera anda.

19 Responses to "Syntax Highlighter dengan Language Autodetection"

  1. wah thanks yah gan udah di bikinin izin coba dulu yah (y)

    ReplyDelete
  2. sekali lagi, ijin sedot sob.... :W

    ReplyDelete
  3. wah bagus nih syntax highlighternya :D, izin praktekin ke blog saya dulu gan :-D

    ReplyDelete
  4. Mantep gan caranyanya, BTW ini bikin berat blog kagax ??

    ReplyDelete
  5. nice tutor kang ^o^ tapi saya masih bingung sama cara pemasangan kode jquery,javascript,xml,jquery Ui @@ soalnya masih awam sama kode itu :s

    bang-irham.blogspot.com

    ReplyDelete
  6. Nambah ilmu lagi nih..and yang ini kayaknya praktis buat langsung copy kodenya..

    ReplyDelete
  7. Bermanfaat ini... مش فهمه اللي بعد الحمد لله
    saya coba ya mas :)
    back on : http://vin-us.blogspot.com/2014/06/kumpulan-blog-dofollow-2014.html

    ReplyDelete
  8. tutor nya menarik banget thx udh share ya

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. keren gan bisa jadi rapih gtu thnk atas ilmunya

    ReplyDelete
  11. Mantep Sob, Bermanfaat bagi saya :)

    ReplyDelete
  12. Wah mantap nih gan :)
    Kira" ada template yang tanpa javascript gak :)

    ReplyDelete
  13. Lengkap nih syntax higliter nya ada keterangan nya lagi.jadi pengen pasang nih.hehe :)

    ReplyDelete
  14. bkin counter button gtu gmana mas, counter yang kaya di tombol demo

    ReplyDelete