PRISM SyntaxHighlighter untuk Blogger
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 :)
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
Light Theme
Langkah 2 : Tambahkan JavaScript di atas
Cara Penggunaan
Setiap tipe bahasa mempunyai kelas masing-masing
Semoga bermanfaat.....
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='https://cdn.jsdelivr.net/gh/kangismet/blog-kang-ismet-new/prism.js'></script>
Simpan TemplateCara Penggunaan
Setiap tipe bahasa mempunyai kelas masing-masing
- HTML, XML, PHP ⇒ language-markup
- CSS ⇒ language-css
- JavaScript ⇒ language-javascript
<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.....
70 komentar
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
5. Untuk menghapus komentar, geser kursor ke sebelah kanan komentar Anda.
image quote pre code
yang udah di escape maksudnya di apain kang ? :D :p
bang-irham.blogspot.com
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
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;
}
scroll kebawah bukan kesamping ?
Tapi saya masih bingung cara memasang nya, bisa penymbang
Berat load gak yah Kang Ismet..? api nice deh Artikel nya
cuma pakai <pre><code>---</code></pre>
tp keren kang,,kaloq di warnai satu" bisa setahun baru kelar..hahahay
kalo satu2 ya setaun satu postingan hahahhaa....
ni masih nyari" toltip kayak chorfrenzy belum ketemu..
yha mungkin kang ismet bisa,,hahahay
Kok Punya Saya Pas Di pasang Cara Membuat Ucapan Terimakasih pada Kolom Komentar.
Tanda Kutipnya (") Di bawah..
Tolong Solusinya...
Terima Kasih..
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
Thanks Atas Solusinya...
saya baru denger istilah ini loh, kang.. :D
<i rel="pre">
biar langsung masuk ke bagian komentar yang menggunakans script manipulasi.. tanpa menambahkan class css ataupun markup ataupun javascript.. :D
plus script manipulasi yang sudah dirubah.. :D
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
skalian nunggu posting tentang highlightnya juga dh.. :D
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;}
Makasih ya kang ...