Cara Memasang PRISM SyntaxHighlighter di Blog

Cara Memasang PRISM SyntaxHighlighter di Blog

Cara Memasang PRISM SyntaxHighlighter di Blog | 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. Menurut pengalaman saya PRISM SyntaxHighlighter ini paling ringan loadingnya.

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


Untuk Menambahkan jQuery Pada Template Blogger ikuti langkah-langkah berikut ini:
1. Login ke Blogger
2. Dashboar > klik template > edit HTML
3. Tambahkan salah-salahsatu kode CSS di bawah ini sebelum/di atas ]]></b:skin>

CSS Light Theme:

/* Tema : LightSyntax oleh Blog Krizeer
URL: http://yoga-tc.blogspot.com/2013/12/cara-memasang-prism-syntaxhighlighter-di-blog.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;
}

4. Tambahkan JavaScript dibawah ini di atas </body>


<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>

5. 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/konversi`) 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>

Sumberhttp://www.dte.web.id/2012/09/syntax-highlighter-dengan-prism.html dan http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html

27 komentar untuk "Cara Memasang PRISM SyntaxHighlighter di Blog"

  1. Pertamaxx....
    Gan Saya Bleh Pake template yg agan pake ini,,

    BalasHapus
    Balasan
    1. ngga boleh sekarang sob, nanti kalo saya udah bosan tar saya bagikan, tapi ingatkan saya ya

      Hapus
    2. Maksud Abdi Teh Kiyeu..
      http://dicoba-gan.blogspot.com/
      abdi tos aya tah jiga ktu...

      Hapus
    3. haduh nih master mau pakai template jelek gini, bagus template sobat yg sekarang lho, hehe, silahkan tapi jangan dibagikan templatenya ya, dan hak ciptanya milik saya !!!

      Hapus
    4. moga aja bosannya cepat Sobat Yoga :)

      Hapus
    5. penyebab saya bosan template yaitu ada template yang bikin saya jadi ngiler, wkwkwk

      Hapus
  2. keren kang.. tp saya udh psng sebelumnya...

    BalasHapus
  3. sepertinya tips ini gk cocok d blog saya ..

    BalasHapus
    Balasan
    1. sudah saya coba di blog lain dan berhasil sob, nih lihat demonya http://tutorial-blogger7.blogspot.com/p/prism-syntax-highter.html

      Hapus
  4. Balasan
    1. dimana gagalnya sob, mungkin saya bisa membantu

      Hapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
    Balasan
    1. wkwokowkwkowkokw..mas-ivan dateng..

      Hapus
    2. wew tumben nih Om Ivan dateng

      Hapus
    3. wah mas ivan datang, ini blog tutorial blogger dan berbagi template gratis, saya hanya ingin berbagi apa yang saya punya mas, tapi kalo Mas Sugeng Blogger Template kan udah dibagikan oleh mas sugeng sendiri

      Hapus
    4. Canda ya mass haha jangan dimasukin ati (y)

      Hapus
    5. iya gpp mas, tapi di dunia blogger ini kita sulit untuk berbisnis terang-terangan, contohnya aja template Fastest Magz kan tuh template dijual, tapi ada aja orang yang membagikannya gratis, hehe jadi dunia blogger yaitu apa yang kita inginkan pasti tercapai, hehe saya juga masuk ke dunia blogger ini cuman hobi saja dan ingin membantu orang2 yg kesusahan tentang komputer dan blogger

      Hapus
    6. sob, gimana caranya bikin homepage kayak blog ini ?
      pada template art preview ?

      Hapus
    7. pertanyaan sobat ini sudah termasuk ilmu tingkat atas, hehe tambahkan kode dibawah ini dibawah ]]></b:skin>
      <!-- Style Homepage Blog Krizeer www.krizeer.tk -->
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
      <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
      <style>
      .post-body {font-size:12px;
      }
      .post h2.post-title {
      font-size:14px; margin:0 0 6px;
      }
      #box-posts {
      padding:10px 8px;
      }
      .post {width:46%;padding:10px 10px 5px;margin:2px;overflow:hidden;float:left;background:#f8f8f8;border:1px solid #e8e8e8;height:87px}
      </style>
      </b:if></b:if>

      Hapus
  6. Mantap gan.. izin sedot ya..
    Bermanfaat buat blog ane gan..
    Terimakasih..
    Salam Blogger

    BalasHapus
  7. I consider you. This post is actually exalting. i prefer your post and everything you share with United States of America is current and extremely informative, i would like to bookmarker the page therefore I will come back here from you that you simply have done an incredible job. kinoshita-toshiyuki.net

    BalasHapus

Untuk menyisipkan kode, gunakan tag <i rel="code">Kode disini...</i> atau <i rel="pre">Kode disini...</i>
Untuk menyisipkan gambar, gunakan <i rel="image">URL gambar disini...</i>
Untuk menyisipkan catatan, gunakan <b rel="quote">Tulis catatan disini...</b>
Untuk menciptakan efek tebal, gunakan tag <b>Teks anda disini...</b>
Konversi Kode Back to Top

Back to Top