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, sesuai DEMO di atas. Berikut beberapa pilihan link CSS. Simpan di atas </head>
PRISM Light by Kang Ismet
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kangismet/syntaxhighlighter@main/css/prism/PrismLight.css">PRISM Default by Lea Verou
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kangismet/syntaxhighlighter@main/css/prism/PrismDefault.css">RDark by DTE:]
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kangismet/syntaxhighlighter@main/css/prism/RDark.css">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 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.....
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.
kan bisa dipake doubleclick atau satu klik aja, pake js lagi.. coba klik kode di atas langsung ke select sob...
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?
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.
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;}
oo...kode yang itu ya...padahal udah liatin dan curiga dengan kode itu hehehe tapi bingung mesti diapain hehehe...
Makasih ya kang ...
Sip kang udah rebeesss hehehe... gara2 ini kemaren rambut rontok...sekarang udah tumbuh lagi wkwkwkwk...
hihihi bapak2 ni pada konferensi pers kayaknya :D
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
yang dirubah kode manipulasinya sob, tapi harus menggunakan highlight.js atau PrettyPrint, tidak bisa pake PRISM
mau dong kang scriptnya... :)
plus script manipulasi yang sudah dirubah.. :D
ini manipulasinya sob
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
thanks kang,,
skalian nunggu posting tentang highlightnya juga dh.. :D
pelajari aja dulu sob di sini http://softwaremaniacs.org/soft/highlight/en/
halah Lea Verou :P
hahaha... jadulnya, aya keneh nu can apaleun pan :)
wuih..
saya baru denger istilah ini loh, kang.. :D
hehehe... silahkan dicoba
Itu dia Kang masih perhatian sama loading blog,kalau dipasang untuk kode diatas mungkin akan terasa jadi berat juga untuk loading blog hehe :)
xixixiix.... kirain ga perduli dengan loading blog mas.. masih beratan banner yang ada di blognya mas... puyeng liatnya :P
hehehe... suka2 lah sob
hehehehe... piis ah....
Saya bungkus dulu kang, masih aga bingung hehe...
monggo silahkan... ;)
Keren kang... request tutorial Highlight.js nya dong..
ditunggu aja sob...
ah saya masih perlu belajar lagi nih kang,belum bisa komeng di baca dulu deh,makasih infonya kang.
ga dibaca langsung komeng ya..... wkwkwkwkw
sayangnya saya jarang post tutorial blog,,hahahay
tp keren kang,,kaloq di warnai satu" bisa setahun baru kelar..hahahay
chord gitar juga bagus warna warni :)
kalo satu2 ya setaun satu postingan hahahhaa....
warna,warni nya masih di isi pake link kang,hahahay jd numpuk link internalnya,,
ni masih nyari" toltip kayak chorfrenzy belum ketemu..
emang tooltipnya kayak gimana?
http://www.chordfrenzy.com/chord/3519/noah-separuh-aku
yha mungkin kang ismet bisa,,hahahay
fungsiny ini apasih kang saya asih belum mengerti apa itu ?
biar gampang membedakan tagnya sob...
Hahay..si akang ini pinter tentang code2 ya. . .
ga pinter sob... lagi belajar :)
Hehe. . .ane perlu belajar nih dari kang ismet
kang mau nanya, kalo mengganti warna background sidebar dan komentar kayak blog ini gmana ?
tinggal cari area komentar, biasanya ditandai dengan #comments dan #sidebar-wrapper
Ikut nyimak aja... maklum masih buta hal beginian... mbil belajar ... makasih kang Ismet...
saya juga masih belajar ko sob...
Makasih kang....
sama2 abu..
maaf kang ismet, baru belajar script, kalo script JQuery termasuk code HTML, XML, PHP ⇒ language-markup ya ? :P
language-javascript sob...
bang saya belum paham tentang syntax....masi belajar :) tapi dengan tutorial yang saya dapat di blog ini saya paham .
kalo SyntaxHighlighter kaya punya akang gimana..??
cuma pakai <pre><code>---</code></pre>
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 . .
ikut make kang ismet
ngiring ngaraosan kode PRISM SYNTAXHIGHLIGHTER na, hatur nuhun.
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
hihi @@, puyeng yang ginian ma,. haduh.. nasib newbe.. hihi
Akhirnya nemu juga :D thanks kang
mampir disini ambil kode prism :D
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;
}
maaf mas, sudah ketemu jadi cuman pakek ini yah. :D
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
kode HTML (yang sudah di`escape`) di sini
yang udah di escape maksudnya di apain kang ? :D :p
bang-irham.blogspot.com
Komentar ini telah dihapus oleh Unknown sebagai penulis.
@Muhammad irham fadhilah, escape itu yang sudah di convert gan
makasih buat tutorialnya. sekarang syntax codenya jadi lebih menarik daripada yang lama :D