Membuat syntaxt highlighter keren di blog ~ Blog Irvan Efendy

Membuat syntaxt highlighter keren di blog

IRVAN EFENDI

Monday, June 9, 2014

Hay,.. sobat Blog Irvan Efendy apa kabar semua nya,.. hehehee
sudah 2 hari 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 langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </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
}

5. Tekan Ctrl+F cari kode </body> Lalu masukan script di bawah ini tepat di atas kode </body>

<script src='http://sites.google.com/site/vanzdy/script/Syntax-highlight.js'></script>

6. Kemudian simpan template sobat.

Penerapannya:

Untuk menampilkan Syntaxt Highlighter tersebut gunakan mode HTML 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="JQuery"><code>Kode JQuery anda disini!</code></pre>

<pre class="numbered" data-codetype="XML"><code>Kode XML anda disini!</code></pre>

<pre class="numbered" data-codetype="JavaScript"><code>Kode Javascript 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>

UpsS,... Baca juga cara membuat Tag Pre keren di blog | Semoga Bermanfaat

Jika bermanfaat? Bantu share ya sobat

Balas Hapus

Games trick and tips 09 June, 2014

wah,, keren ane nyoba ahh

Anonymous 09 June, 2014

Tampilan blog lebih keren ya kalau kodenya warna-wani :D

IRVAN EFENDI 09 June, 2014

iyaa gan :)
monggo di coba langsung mumpung masih hangat :D

silahkan sob :-d

monggo di coba gan (y)

dzulkifli 09 June, 2014

mantap gan, ane coba dulu

Reza Syahputra Rizal 09 June, 2014

Gan Saya Mau Nanya Saya Pernah Pake Syntaaxt Highilighter Di Blog
Yang Versi Hitam Pas Dipake Bisa & Dan Warnanya Hitam
Yang Jadi Masalah Ketika Saya Pake Template Kang Mousir Kenapa Syntaxt Highilighter
Nya Menjadi Warna Putih ?

kode CSS dan script HTML syntaxt highlighter nya udah di pasang kembali gak di template yang baru,..???

Thank you :D
monggo di cicip i gan :-d

Sudah Gan , Tetapi Warnaya Berubah Bukan Hitam Tapi Putih :3

coba agan hapus semua kode syntaxt yang ada di template agan trus ganti dengan syntaxt yang ada di postingan ini,.. :b02:

jangguik 09 June, 2014

mantap ni gan. ane coba dulu. thanks

monggo gan :-d (y)

Unknown 11 June, 2014

wah syntaxnya beneran keren bro, izin terapin dulu ke blog saya :D hehe

IRVAN EFENDI 11 June, 2014

hehehee :c03:
silahkan vroh :-d

Anonymous 13 June, 2014

keren, :)

aku udah buat tutornya malah, :D
nanti bisa dioba

IRVAN EFENDI 13 June, 2014

monggo vroh :-d
salam Blogger Indonesia :)

Anonymous 20 June, 2014

wah mantap langsung ane coba dlu
thanks for share

IRVAN EFENDI 20 June, 2014

silahkan sob,.. (y)
sukses slalu dah :-d

Unknown 20 June, 2014

Wihh keren nih.. Izin nyoba ya gan..

Unknown 30 June, 2014

utuk pengkodean PHP masuk kategori mana ??

IRVAN EFENDI 30 June, 2014

pake code ini sama ajah gan <pre class="numbered" data-codetype="XML"><code>YOUR KODE !</code></pre>

gk kluar gan script nya ,,

Ahh masa sih,..
coba sini aku lihat gan..

monggo gan :-d

Done gan , Lupa belum di escape :v Haturnuhun (y)

hahahahaa :)
saya udah kira kalo belum di konvert nyata bener :-d

ok ok sama" gan (y)

Gan , kalo bikin yang double klik di pojok itu gimana ?? :P

Tambahkan kode ini diatas </style> gan :-d
pre .tex .formula {background: #89c4f4;}pre::after {content: "Double click selection";padding: 2px 10px;width: auto;height: auto;font: 11px "Consolas",Arial,"Helvetica Neue","Lucida Grande",sans-serif;position: absolute;right: 0px;top: 0px;transition: opacity 0.2s ease-in-out;color: #fff;border-radius:0px 0px 2px 2px;background-color: rgba(161, 164, 165, 0.61);}pre:hover::after {opacity:0;visibility:visible;}blockquote {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:.5em;position:relative;white-space: pre;word-wrap: normal;white-space:pre;overflow:auto}

itu hanya nampilin yah , nah kalo fungsi nya gan ??

silahkan pelajari di sini gan :b02:
http://irvan-efendy.blogspot.com/2014/05/cara-membuat-seleksi-otomatis-pada-tag.html

This comment has been removed by the author.

wew sudah gan :c03:
salam kenal~

iya gan sama"
salam kenal juga :-d

Unknown 14 July, 2014

sob biar komentar pake script bagai mana ??

IRVAN EFENDI 14 July, 2014

Gunakan kode ini gan
<i rel="code">YOUR SCRIPT</i>
tapi sebelum script di masukkan di convert dulu :-d

💬 Peraturan dalam berkomentar :
➥ Budayakan berkomentar sesudah membaca artikel sob.
➥ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
➥ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, dan Profokasi.
➥ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT).
➥ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.

Konversi Kode Konversi KodeOut Of TopicEmoticon

Terima kasih telah berkomentar

Simak langkah2 dibawah ini:

Penerapannya:

Nanti DEMO nya seperti dibawah ini :

Simak langkah² dibawah ini: