Memasang Syntax Highlighter Di Blog

Memasang Syntax Highlighter Di Blog - Syntax Highlighter adalah suatu tempat, atau wadah yang berbentuk text area dimana, didalamnya kita dapat memasukkan kode-kode yang dapat berupa code-code dari bahasa java, HTML, Javascript, PHP, CSS, dan kode-kode lainnya.  Fungsi Dari Syntax Highlighter ini adalah untuk memudahkan Para Pembaca Blog Untuk Mengelompokan Suatu Code Code HTML, JavaScript , CSS dan Lainnya. Kali ini Saya Akan Membagikan Tutorial Cara Memasang Syntax highlighter di Blog. Berikut Tutorial :

Pertama : Menyimpan Javascript

Simpan Code Javascript ini Tepat diatas Kode </head>

<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
    <script>
      hljs.initHighlightingOnLoad();
    </script>

Kedua : Memilih CSS

Banyak pilihan CSS yang bisa anda gunakan, sebelum memilih CSS silahkan lihat Demo DISINI.
Untuk Pilihan CSS, Anda bisa lihat ambil DISINI.
lalu Taruh Code CSS yang anda Pilih tepat di atas Code ]]></b:skin> atau </style>

Anda Juga Bisa Memilih CSS Syntax Higlighter yang digunakan Blog ini, Berikut CSS nya :

 /*PRE*/
pre,i[rel="pre"] {
padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-left:4px solid #40627E;
font-size:13px;
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/AVvXsEgxJCD1_bGTKxuTwdbljpsHtz0GFMV3KM-G-vF2SDp57z6SZDxpVBMjTtfc-cT1svp7c_20mYcz_627BH1tcg_L2QXwaoa6Ybka5uziBi70AHSDGAYw6tKt4nFbmZkSPFsRWE6cUUzkanA/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:14px;
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;
}
#comments pre {
    margin-bottom:-15px;
}
pre code {
padding:0 !important;
color: #a3a49a;
background: none !important;
border:none !important;
display:block;
}
pre mark {background-color:#1a5752;color:#a3a483}
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;
}

Ketiga : Cara Penggunaan

Cara Menggunakan Syntax Highlighter ini sebagai berikut :

<pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre>

Sekian Dari Saya Semoga Bermanfaat,

Share this post