Memasang SyntaxHighlighter di blogger - Sahabat hanya blogger pada postingan kali ini saya akan menuliskan sedikit mengenai cara Memasang SyntaxHighlighter di blogger, buat anda yang masih bertanya tanya trus fungsi SyntaxHighlighter itu apaan? jadi SyntaxHighlighter itu bisa memudahkan para pembaca untuk melihat code code yang anda posting di blog seperti code css, html, dan javascript. jika dulu di blog yang menggunakan mesin wordpres saya menggunakan plugin yang sudah jadi maka lain halnya yang terjadi di blogger karena di blogger kita harus menambahkan beberapa code untuk bisa menikmati SyntaxHighlighter.
Kemudian letakkan code di bawah ini di atas kata </body>
Jika sudah simpan template.
Yang perlu anda ingat adalah setiap tipe code mempunyai kelas masing-masing misalkan
cara penulisannya seperti ini :
Sumber : kangismet
Meskipun memasang Memasang SyntaxHighlighter di blogger tidak semudah di wordpress tapi saya rasa anda juga layak mencobanya di blogger apalagi jika anda sering membahas tentang postingan postingan yang mengandung unsur unsur code di blog anda,lalu bagaimana cara Memasang SyntaxHighlighter di blogger? ikuti langkah berikut ini.
 |
| Tampilan SyntaxHighlighter di blogger |
Memasang SyntaxHighlighter di blogger
Pertama tama yang harus anda lakukan untuk Memasang SyntaxHighlighter di blogger adalah menambahkan code css berikut ini di atas ]]></b:skin>
/* Tema : LightSyntax */
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;
}
Kemudian letakkan code di bawah ini di atas kata </body>
<script type="text/javascript" src='http://kang-is.googlecode.com/svn/trunk/javascript/prism.js'></script>Jika sudah simpan template.
Yang perlu anda ingat adalah setiap tipe code mempunyai kelas masing-masing misalkan
- HTML, XML, PHP ⇒ language-markup
- CSS ⇒ language-css
- JavaScript ⇒ language-javascript
cara penulisannya seperti ini :
<pre><code class="language-markup"> ... code HTML, XML, PHP (yang sudah di`escape`) di sini ... </code></pre>
<pre><code class="language-css"> ... code CSS di sini ... </code></pre>
<pre><code class="language-javascript"> ... code JavaScript di sini ... </code></pre>Sumber : kangismet