Kunjungi Blog terbaru saya corkismet - Coretan Kang Ismet - dan tinggalkan jejak sobat disana.
Beranda
Highlights

PRISM SyntaxHighlighter untuk Blogger

Menampilkan kode berwarna-warni dengan PRISM SyntaxHighlighter di Blogger / Blogspot.

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.


Prism Light Prism Default RDark

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.....

#Highlights

Untuk mendapatkan update terbaru di Dasbor Blogger, silahkan ikuti Blog ini

70 komentar

1. Komentar ini, diurutkan dari yang terbaru
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
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
  1. 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.
    1. kan bisa dipake doubleclick atau satu klik aja, pake js lagi.. coba klik kode di atas langsung ke select sob...
    2. 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?
    3. 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.
    4. 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;}
    5. oo...kode yang itu ya...padahal udah liatin dan curiga dengan kode itu hehehe tapi bingung mesti diapain hehehe...
      Makasih ya kang ...
    6. Sip kang udah rebeesss hehehe... gara2 ini kemaren rambut rontok...sekarang udah tumbuh lagi wkwkwkwk...
    7. hihihi bapak2 ni pada konferensi pers kayaknya :D
  2. 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
    1. yang dirubah kode manipulasinya sob, tapi harus menggunakan highlight.js atau PrettyPrint, tidak bisa pake PRISM
    2. mau dong kang scriptnya... :)
      plus script manipulasi yang sudah dirubah.. :D
    3. ini manipulasinya sob
      $('i[rel="pre"]').replaceWith(function() {
      return $('<pre><code>' + $(this).html() + '</code></pre>');
      });
    4. thanks kang,,
      skalian nunggu posting tentang highlightnya juga dh.. :D
    5. pelajari aja dulu sob di sini http://softwaremaniacs.org/soft/highlight/en/
  3. halah Lea Verou :P
    1. hahaha... jadulnya, aya keneh nu can apaleun pan :)
  4. wuih..
    saya baru denger istilah ini loh, kang.. :D
    1. hehehe... silahkan dicoba
  5. Kang Mau Nanya...

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

    Tanda Kutipnya (") Di bawah..

    Tolong Solusinya...

    Terima Kasih..
    1. 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
    2. Kang Punya Saya Udah Bener Belum..?
    3. udah normal sekarang
    4. Sep ..

      Thanks Atas Solusinya...
  6. Itu dia Kang masih perhatian sama loading blog,kalau dipasang untuk kode diatas mungkin akan terasa jadi berat juga untuk loading blog hehe :)
    1. xixixiix.... kirain ga perduli dengan loading blog mas.. masih beratan banner yang ada di blognya mas... puyeng liatnya :P
    2. hehehe... suka2 lah sob
    3. hehehehe... piis ah....
  7. Saya bungkus dulu kang, masih aga bingung hehe...
    1. monggo silahkan... ;)
  8. Keren kang... request tutorial Highlight.js nya dong..
    1. ditunggu aja sob...
  9. ah saya masih perlu belajar lagi nih kang,belum bisa komeng di baca dulu deh,makasih infonya kang.
    1. ga dibaca langsung komeng ya..... wkwkwkwkw
  10. sayangnya saya jarang post tutorial blog,,hahahay
    tp keren kang,,kaloq di warnai satu" bisa setahun baru kelar..hahahay
    1. chord gitar juga bagus warna warni :)
      kalo satu2 ya setaun satu postingan hahahhaa....
    2. warna,warni nya masih di isi pake link kang,hahahay jd numpuk link internalnya,,
      ni masih nyari" toltip kayak chorfrenzy belum ketemu..
    3. emang tooltipnya kayak gimana?
    4. http://www.chordfrenzy.com/chord/3519/noah-separuh-aku
      yha mungkin kang ismet bisa,,hahahay
  11. fungsiny ini apasih kang saya asih belum mengerti apa itu ?
    1. biar gampang membedakan tagnya sob...
  12. Hahay..si akang ini pinter tentang code2 ya. . .
    1. ga pinter sob... lagi belajar :)
    2. Hehe. . .ane perlu belajar nih dari kang ismet
  13. kang mau nanya, kalo mengganti warna background sidebar dan komentar kayak blog ini gmana ?
    1. tinggal cari area komentar, biasanya ditandai dengan #comments dan #sidebar-wrapper
  14. Ikut nyimak aja... maklum masih buta hal beginian... mbil belajar ... makasih kang Ismet...
    1. saya juga masih belajar ko sob...
  15. Makasih kang....
    1. sama2 abu..
  16. maaf kang ismet, baru belajar script, kalo script JQuery termasuk code HTML, XML, PHP ⇒ language-markup ya ? :P
    1. language-javascript sob...
  17. bang saya belum paham tentang syntax....masi belajar :) tapi dengan tutorial yang saya dapat di blog ini saya paham .
  18. kalo SyntaxHighlighter kaya punya akang gimana..??
    cuma pakai <pre><code>---</code></pre>
  19. 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 . .
  20. ikut make kang ismet
  21. ngiring ngaraosan kode PRISM SYNTAXHIGHLIGHTER na, hatur nuhun.
  22. 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
  23. kang misalnya kodenya panjang, gimana caranya biar ada scrollnya ?
    scroll kebawah bukan kesamping ?
  24. hihi @@, puyeng yang ginian ma,. haduh.. nasib newbe.. hihi
  25. Akhirnya nemu juga :D thanks kang
  26. mampir disini ambil kode prism :D
  27. 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;
    }
  28. maaf mas, sudah ketemu jadi cuman pakek ini yah. :D
    $('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
    });
  29. kang di blogku tag prenya ijo semua :(
  30. kode HTML (yang sudah di`escape`) di sini

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

    bang-irham.blogspot.com
  31. Unknown
    Komentar ini telah dihapus oleh pengarang.
  32. @Muhammad irham fadhilah, escape itu yang sudah di convert gan
  33. makasih buat tutorialnya. sekarang syntax codenya jadi lebih menarik daripada yang lama :D
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.