22 December 2014

Cara Menampilkan Source Code dengan Syntax Highlighter

Tags


nama gambar
Gambar Syntax Highlighter © social media com


Syntax highlighter versi 3.0.83 yang merupakan versi terbaru daru sang penemu sekalian pembuat Syntax Highlighter, Alex Gorbatchev. Sudah pada penasaran bukan, mari kita ikuti cara-cara penerapan dan penjelasan di bawah.

Masih pada belum tahu ya apa itu Syntax Highlighter? Jadi, 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, Jscript, PHP, CSS, dan kode-kode lainnya. 

Apa sih Fungsi Syntax Highlighter?
Fungsi dari Syntax Highlighter adalah mempermudah pembaca untuk membaca maupun menyalin kode yang dipost oleh penulis. Jadi, pembaca tidak perlu repot-repot lagi untuk nge-blok tulisan, kalau sedikit sih enak, bagaimana kalau lebih dari 10.000 baris code? Silahkan anda bayangkan


Bagaimana Cara Pemasangannya?
1. Jangan Lupa login ke Akun Blogger anda

2. Masuk ke bagian Template, lalu klik Edit HTML

3. Cari kode ]]></b:skin>, lalu letakkan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

pre,i[rel="pre"] {
padding:.8em 1em;
margin:0;
background-color:#2f3741;
border-top:3px solid #2670B5;
border-left:7px solid #2670B5;
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;
white-space:pre;
overflow:auto
}
pre.line-number {
background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/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;}

4. kemudian cari kode </head> dan letakkan kode berikut ini di atasnya

<script src='https://googledrive.com/host/0B8zY82qas755TXNaZ0FGWUVPSEE' type='text/javascript'/>
<script>hljs.initHighlightingOnLoad();
</script>

5 Agar fitur Syntax Highlighter berfungsi dalam kolom komentar letakkan pula kode berikut di atas kode </body>

<script type='text/javascript'>
$(&#39;i[rel=&quot;pre&quot;]&#39;).replaceWith(function() {
    return $(&#39;<pre><code>&#39; + $(this).html() + &#39;</code></pre>&#39;);
});
</script>

5 save template .

cara menampikannya di postingan


Caranya setelah kita selesai menulis kode yang kita inginkan, masuk ke mode HTML seperti di bawah ini.




Gunakan markup HTML di bawah ini untuk menggunakan syntax highlighter pada saat anda ingin menampilkan source code, seperti kode CSS, Javascript, dan mark up HTML.pada postingan anda.


<pre><code>
Isi Kode Javascript, jQuery atau Kode CSS atau Kode HTML
disini...bla... bla.... bla... 
</code></pre>

oky, itu pembahasan tentang “Cara Menampilkan Source Code lebih Menarik dengan Syntax Highlighter” yang dapat saya sampaikan. Apabia ada yang ingin sobat tanyakan dapat ditanyakan pada kolom komentar.

Sekian Terima Kasih, Salam Teknologi



EmoticonEmoticon