PRISM SyntaxHighlighter untuk Blogger - Bagi sahabat yang sering berbagi tutorial, saya kira sudah tidak asing lagi dengan istilah Syntax Highlighter. Tapi mungkin juga masih ada yang bertanya, apa sih sintaxhighlighter itu? Bahasa mudah nya membuat kode berwarna warni :)prism syntaxhighlighter

Pada awal ngeblog, saya menggunakan SyntaxHighlighter dari Alex Gorbatchev, akan tetapi saya rasa loadingnya sangat berat. Kemudian saya berpindah ke PRISM syntaxhighlighter. Saya rasa, PRISM ini yang paling ringan diload, walaupun saya sekarang menggunakan highlight.js.

Untuk pemasangannya, hanya memerlukan dua langkah mudah, yaitu memasang kode CSS dan JavaScript. Sebelum memasang kode CSS, silahkan pilih tema Dark atau Light.


Langkah 1: Tambahkan CSS.

Silahkan pilih sesuai kebutuhan di blog sobat, versi Light atau Dark. Silahkan simpan salah satu kode CSS di bawah ini di atas ]]></b:skin>

Light Theme

/* Tema : LightSyntax oleh Kang Ismet
URL: http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html */ 
pre {
margin:15px 15px 15px 0;
padding:10px;clear:both;
background:#f2f2f2;
color:#666;
border:1px solid #ddd;
overflow:auto;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 12px !important;
}
code {
color:#126AAF;
font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
font-weight: normal !important;
font-style: normal !important;
font-size: 13px !important;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#800000;
}
code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#008200;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#881280;
}
code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#994500;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#994500;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}
pre code .token.atrule,
pre code .token.attr-value {
  color:#227BC0;
}
code .token.keyword {
  color:#881280;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}
Dark Theme
/*
Tema RDark oleh DTE:] berdasarkan tema-tema SyntaxHighligter dari Alex Gorbatchev
URL: http://alexgorbatchev.com/SyntaxHighlighter/manual/themes/rdark.html
*/
pre {
  padding:.5em 1em;
  margin:.5em 0;
  white-space:pre;
  word-wrap:normal;
  overflow:auto;
  background-color:#1B2426;
}
code {
  font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
  line-height:16px;
  color:#B43D3D;
  background-color:#eee;
  border:1px solid #ddd;
  padding:1px 2px;
}
pre code {
  display:block;
  background:none;
  border:none;
  color:#B9BDB6;
  direction:ltr;
  text-align:left;
  word-spacing:normal;
  padding:0 0;
}
code .token.punctuation {
  color:#83405A;
}
pre code .token.punctuation {
  color:#B9BDB6;
}

code .token.comment,
code .token.prolog,
code .token.doctype,
code .token.cdata {
  color:#435A4D;
}
code .namespace {
  opacity:.8;
}
code .token.property,
code .token.tag,
code .token.boolean,
code .token.number {
  color:#5BA1CF;
}

code .token.selector,
code .token.attr-name,
code .token.string {
  color:#986A7C;
}
pre code .token.selector,
pre code .token.attr-name,
pre code .token.string {
  color:#E0E8FF;
}
code .token.entity,
code .token.url,
pre .language-css .token.string,
pre .style .token.string {
  color:#E0E8FF;
}
code .token.operator {
  color:#878A85;
}
code .token.atrule,
code .token.attr-value {
  color:#48D30F;
}

pre code .token.atrule,
pre code .token.attr-value {
  color:#48E638;
}
code .token.keyword {
  color:#47A1CF;
  font-style:italic;
}
code .token.comment {
  font-style:italic;
}
code .token.regex {
  color:#B43D3D;
}
code .token.important {
  font-weight:bold;
}
code .token.entity {
  cursor:help;
}

Langkah 2 : Tambahkan JavaScript di atas </body>
<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>
Simpan Template

Cara Penggunaan

Setiap tipe bahasa mempunyai kelas masing-masing
  • HTML, XML, PHP ⇒ language-markup
  • CSS ⇒ language-css
  • JavaScript ⇒ language-javascript
Detail penulisan seperti ini:
<pre><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>
<pre><code class="language-css"> ... kode CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

Semoga bermanfaat.....

Source : DTE

70 komentar

Bagus juga ya kang ga memberatkan blog, saya juga pernah coba pakai SyntaxHighlighter dari Alex Gorbatchev itu tapi gara2 berat saya cabut lagi. Cuman yg ini ga ada pop-up untuk copy kodenya ya kang... Jadi harus tetap blok huruf di postingan untuk mengcopy kodenya.

Balas

kan bisa dipake doubleclick atau satu klik aja, pake js lagi.. coba klik kode di atas langsung ke select sob...

Balas

Hahaha iya kang saya ga enggeh padahal saya udah beberapa kali ambil tutorial di sini dan memang begitu bisa blok otomatis, hehehe saya tadi hanya fokus pada pop-up untuk copy plain text. Tapi tetap kedetek copy text di blog kita ga kang?

Balas

Sekalian kang, kalau bisa bikinin tutorial untuk membuat tanda khusus untuk komentar admin seperti punya kang Ismet yang segitiga biru itu, saya kesulitan untuk membuatnya di blog saya.

Balas

yang formatnya seperti ini ada ga kang.. :: ? :D
<i rel="pre">
biar langsung masuk ke bagian komentar yang menggunakans script manipulasi.. tanpa menambahkan class css ataupun markup ataupun javascript.. :D

Balas

wuih..
saya baru denger istilah ini loh, kang.. :D

Balas

hehehe... berarti selalu blok teks ya... kalau itu saya kurang tau sob, soalnya ga pake copyscape

Kalau Segitiga biru sih buat bikin pisang goreng... wkwkwkwk, ni kodenya sob ganti aja warnanya :
.comments .comments-content .icon.blog-author{-moz-border-bottom-colors:none;-moz-border-left-colors:none;-moz-border-right-colors:none;-moz-border-top-colors:none;border-color:transparent #276085 transparent transparent;border-image:none;border-style:solid;border-width:12px;bottom:10px;display:block;height:0;position:absolute;right:0;width:0;}

Balas

hahaha... jadulnya, aya keneh nu can apaleun pan :)

Balas

hehehe... silahkan dicoba

Balas

Kang Mau Nanya...

Kok Punya Saya Pas Di pasang Cara Membuat Ucapan Terimakasih pada Kolom Komentar.

Tanda Kutipnya (") Di bawah..

Tolong Solusinya...

Terima Kasih..

Balas

yang dirubah kode manipulasinya sob, tapi harus menggunakan highlight.js atau PrettyPrint, tidak bisa pake PRISM

Balas

waduh.. komengya ga nyambung sob... coba disini http://blog.kangismet.net/2013/04/cara-membuat-ucapan-terimakasih-pada-kolom-komentar.html
sekalian aja deh :) cari kode :
.comments .thanks-comment:before{content:open-quote;position:absolute;top:0;left:0;margin-top:15px;font-size:4em;color:#d80556}
ganti margin-top:15px menjadi margin-top:-15px atau sesuaikan saja.. dicoba2

Balas

oo...kode yang itu ya...padahal udah liatin dan curiga dengan kode itu hehehe tapi bingung mesti diapain hehehe...
Makasih ya kang ...

Balas

Itu dia Kang masih perhatian sama loading blog,kalau dipasang untuk kode diatas mungkin akan terasa jadi berat juga untuk loading blog hehe :)

Balas

Saya bungkus dulu kang, masih aga bingung hehe...

Balas

Sip kang udah rebeesss hehehe... gara2 ini kemaren rambut rontok...sekarang udah tumbuh lagi wkwkwkwk...

Balas

Kang Punya Saya Udah Bener Belum..?

Balas

mau dong kang scriptnya... :)
plus script manipulasi yang sudah dirubah.. :D

Balas

Keren kang... request tutorial Highlight.js nya dong..

Balas

xixixiix.... kirain ga perduli dengan loading blog mas.. masih beratan banner yang ada di blognya mas... puyeng liatnya :P

Balas

Sep ..

Thanks Atas Solusinya...

Balas

ah saya masih perlu belajar lagi nih kang,belum bisa komeng di baca dulu deh,makasih infonya kang.

Balas

sayangnya saya jarang post tutorial blog,,hahahay
tp keren kang,,kaloq di warnai satu" bisa setahun baru kelar..hahahay

Balas

fungsiny ini apasih kang saya asih belum mengerti apa itu ?

Balas

hehehe... suka2 lah sob

Balas

ga dibaca langsung komeng ya..... wkwkwkwkw

Balas

chord gitar juga bagus warna warni :)
kalo satu2 ya setaun satu postingan hahahhaa....

Balas

biar gampang membedakan tagnya sob...

Balas

ini manipulasinya sob
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});

Balas

Hahay..si akang ini pinter tentang code2 ya. . .

Balas

ga pinter sob... lagi belajar :)

Balas

warna,warni nya masih di isi pake link kang,hahahay jd numpuk link internalnya,,
ni masih nyari" toltip kayak chorfrenzy belum ketemu..

Balas

emang tooltipnya kayak gimana?

Balas

http://www.chordfrenzy.com/chord/3519/noah-separuh-aku
yha mungkin kang ismet bisa,,hahahay

Balas

hihihi bapak2 ni pada konferensi pers kayaknya :D

Balas

Hehe. . .ane perlu belajar nih dari kang ismet

Balas

hehehehe... piis ah....

Balas

thanks kang,,
skalian nunggu posting tentang highlightnya juga dh.. :D

Balas

pelajari aja dulu sob di sini http://softwaremaniacs.org/soft/highlight/en/

Balas

kang mau nanya, kalo mengganti warna background sidebar dan komentar kayak blog ini gmana ?

Balas

Ikut nyimak aja... maklum masih buta hal beginian... mbil belajar ... makasih kang Ismet...

Balas

tinggal cari area komentar, biasanya ditandai dengan #comments dan #sidebar-wrapper

Balas

saya juga masih belajar ko sob...

Balas

maaf kang ismet, baru belajar script, kalo script JQuery termasuk code HTML, XML, PHP ⇒ language-markup ya ? :P

Balas

language-javascript sob...

Balas

bang saya belum paham tentang syntax....masi belajar :) tapi dengan tutorial yang saya dapat di blog ini saya paham .

Balas

kalo SyntaxHighlighter kaya punya akang gimana..??
cuma pakai <pre><code>---</code></pre>

Balas

Kang? Aku pengen belajar yang pake Syntax nya itu kaya akang :) Ya maksud aku " Klik ganda untuk seleksi " terus jadi ke seleksi semua :) gimana tuh caranya . .

Balas

ngiring ngaraosan kode PRISM SYNTAXHIGHLIGHTER na, hatur nuhun.

Balas

Nyimak saja, Kang dari perbincangan Master dan senior saya
Banyak teks yang mendidik buat saya cerna, terima kasih atas
Artikelnya Kang Ismet Dan Kang Adhy

Balas

Cukup Menarik artikel nya. Syntax bisa di pasang di blogger
Tapi saya masih bingung cara memasang nya, bisa penymbang
Berat load gak yah Kang Ismet..? api nice deh Artikel nya

Balas

kang misalnya kodenya panjang, gimana caranya biar ada scrollnya ?
scroll kebawah bukan kesamping ?

Balas

hihi @@, puyeng yang ginian ma,. haduh.. nasib newbe.. hihi

Balas

Akhirnya nemu juga :D thanks kang

Balas

mampir disini ambil kode prism :D

Balas

kang mau tanya, saya kan pakek Syntax Highlighter.js itu, terus masalahnya ada pada komentar, kodenya malah berantakan kang.
gak serapi punya akang ini. :)
pre {
padding:.5em 1em;
margin:.5em 0;
white-space:pre;
word-wrap:normal;
overflow:auto;
background-color:#1B2426;
}
code {
font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;
line-height:16px;
color:#B43D3D;
background-color:#eee;
border:1px solid #ddd;
padding:1px 2px;
}

Balas

maaf mas, sudah ketemu jadi cuman pakek ini yah. :D
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});

Balas

kang di blogku tag prenya ijo semua :(

Balas

kode HTML (yang sudah di`escape`) di sini

yang udah di escape maksudnya di apain kang ? :D :p

bang-irham.blogspot.com

Balas
Komentar ini telah dihapus oleh pengarang.

@Muhammad irham fadhilah, escape itu yang sudah di convert gan

Balas

makasih buat tutorialnya. sekarang syntax codenya jadi lebih menarik daripada yang lama :D

Balas

Poskan Komentar


×
Chat