Cara Membuat Dark PRIMS SyntaxHighlighter Untuk Blog

Dark PRIMS SyntaxHighlighter ini berguna untuk mempercantik tampilan saat kita sedang share tutorial dengan menyertai JavaScript, CSS, dan HTML. Selain itu, Dark PRIMS SyntaxHighlighter juga tidak memperberat blog anda.

Untuk memasang Dark PRIMS SyntaxHighlighter sangatlah mudah dan simple jika kalian mengikuti dengan baik tutorial dibawah ini. Cukup memasang CSS dan JavaScript, blog sudah terpasang Dark PRIMS SyntaxHighlighter ini.

• DEMO

Nah jika berminat ingin memasangnya di blog anda bisa ikuti tutorial simple dibawah ini

Tutorial

Pertama masuk blogger.com

Pilih blog yang mau anda terapkan

Klik "Template > Edit HTML"

Lalu masukan CSS dibawah ini diatas </b:skin>

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;
}

Lalu masukan JavaScript dibawah ini diatas </body>

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

Jika sudah klik "Simpan Template"

Nah untuk cara penulisannya :

<pre><code class="language-markup"> Untuk  HTML </code></pre>
<pre><code class="language-css"> Untuk CSS </code></pre>
<pre><code class="language-javascript"> Untuk JavaScript </code></pre>

Lihat perbedaannya jika anda mengposting Script tanpa Dark PRIMS SyntaxHighlighter dan memakai, pasti kelihatan lebih sangat rapihkan ? Jika ada pertanayaan seputar Cara Membuat Dark PRIMS SyntaxHighlighter Untuk Blog bisa tulis di kolom komentar...




source: http://blog.kangismet.net/2013/05/prism-syntaxhighlighter-untuk-blogger.html

Silahkan Gunakan Facebook Comment, Jika Anda Tidak Memiliki Blog

Tweet