Cara Pasang PRISM SyntaxHighlighter untuk Blogger Terbaru V.2
Cara Pasang PRISM SyntaxHighlighter untuk Blogger Terbaru V.2, Anaktimor17 Blog - sobat bloggers, sebelumnya saya sudah sahare kepada Anda tips pertama yaitu "Cara Pasang PRISM SyntaxHighlighter untuk Blogger Terbaru " . Nah kali ini saya bagikan kepada anda versi keduanya ^_^ . Tampilan-nya sama dengan versi yang pertama. Ok, untuk anda yang ingin memasang syntax di dalam blog silahkan ikuti langkah-langkahnya di bawah ini:
Copy script css di bawah ini dan simpan di atas]]></b:skin>
atau</style>
. Sript CSS saya gunakan pada blog ini.
pre,i[rel="pre"] { padding:.8em 1em; margin:0; background-color:#2f3741; border-left:4px solid #40627E; font-size:11px; color:#839496; font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; line-height:1.4em; position:relative; white-space: pre; word-wrap: normal; white-space:pre; overflow:auto } pre.line-number { background:#2f3741 url(http://4.bp.blogspot.com/-13ewIh6Vm50/UnBe-_3zqDI/AAAAAAAAF-o/4FNnjpi-N5c/s1600/new-line-number.png)no-repeat top left; padding-left:54px; border-left:none; } pre.line-number:after{ content:""; width:35px; height:8px; background-color:#39424e; bottom:0; left:0; position:absolute; } pre[data-codetype="CSS"]{border-left-color:#5fbbba} pre[data-codetype="HTML"]{border-left-color:#4fc1eb} pre[data-codetype="JavaScript"]{border-left-color:#ff6c60} pre[data-codetype="JQuery"]{border-left-color:#99c262} pre.line-number[data-codetype]:before { content:attr(data-codetype); display:block; margin:-11px -13px 10px -54px; padding:8px 12px; font-family:Oswald,Arial,Sans-serif; font-size:12px; text-transform:uppercase; background-color:#41749f; color:white } pre.line-number[data-codetype="CSS"]:before{background-color:#a9d86e} pre.line-number[data-codetype="HTML"]:before{background-color:#4fc1eb} pre.line-number[data-codetype="JavaScript"]:before{background-color:#ff6c60} pre.line-number[data-codetype="JQuery"]:before{background-color:#99c262} code { font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,Monospace; font-size:13px; color: #d14; } #comments code { color:#bbbb6d; } pre code { padding:0 !important; color: #a3a49a; background: none !important; border:none !important; display:block; } pre .line-number { float:left; margin:0 1em 0 -1em; color:#61686d; background-color:#39424e; text-align:right; min-width:2.5em; padding-right:4px; } pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc { color: #586e75; font-style: italic; } pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title { color: #859900; } pre .number, pre .command, pre .string, pre .tag .value, pre .rules .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor { color: #7195a3; } pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id, pre .css .function { color: #569dcf; } pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type { color: #aa985a; } pre .preprocessor, pre .preprocessor .keyword, pre .shebang, pre .symbol, pre .symbol .string, pre .diff .change, pre .special, pre .attr_selector, pre .important, pre .subst, pre .cdata, pre .clojure .title, pre .css .pseudo { color: #509a55; } pre .deletion { color: #dc322f; } pre .tex .formula { background: #073642;}
Anda Simpan Script ini di bawah ini tepat di atas kode </head>
.
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/> <script> hljs.initHighlightingOnLoad(); </script>
Anda copy dan simpan Script di bawah ini tepat diatas kode </body>
.
<script type='text/javascript'> $('i[rel="pre"]').replaceWith(function() { return $('<pre><code>' + $(this).html() + '</code></pre>'); }); </script>
Untuk penggunaan syntax ini Anda gunakan kode seperti bawah ini.
<pre><code>...kode HTML atau JavaSript di sini...</code></pre>
Pastikan penulisan pada mode HTML bukan Compose.
Atau dengan menggunakan kode di bawah ini.
<pre data-codetype="CSS"><code>...........</code></pre> /* Untuk CSS */
<pre data-codetype="HTML"><code>...........</code></pre> /* Untuk HTML */
<pre data-codetype="JavaScript"><code>...........</code></pre> /* Untuk JavaScript */
<pre data-codetype="JQuery"><code>...........</code></pre> /* Untuk kode JQuery */
Selamat mencoba, semoga berhasil.Jika Anda mengalami kendala/masalah silahkan berikan komentar Anda :)semoga artikel Cara Pasang PRISM SyntaxHighlighter untuk Blogger Terbaru V.2, dapat bermamfaat untuk Anda :)
2 comments
- Top comments
- Newest first