Cara Pasang Prism Syntax Highlighter di Blogspot

10:38 AM
Cara Pasang Prism Syntax Highlighter di Blogspot bisa kamu praktekkan seperti berikut ini.Ini berguna untuk menyeleksi penulisan untuk kode-kode tertentu seperti CSS,JQUERY,HTML yang ingin kita tampilkan di dalam postingan blog.Biasanya para blogger yang suka berbagi tutorial blogger pasti akan menggunakannya.
Cara Pasang Prism Syntax Highlighter di Blogspot

Baiklah,langsung aja dipraktekkan ya, masuk aja langsung ke edit HTML pada template anda.Nah urutannya adalah sebagai berikut ini :

Blogger > Template > Edit HTML > copy seluruh kode dibawah ini dan pasang sebelum kode ]]></b:skin> atau </style>


/* CSS Prism Syntax Highlighter */ pre { padding: 50px 10px 10px 10px; margin: .5em 0; white-space: pre; word-wrap: break-word; overflow: auto; background-color:#2c323c; position: relative; border-radius: 4px; max-height: 500px; } pre::before {font-size: 16px; content: attr(title); position: absolute; top: 0; background-color:#eee; padding: 10px; left: 0; right: 0; color: #fff; text-transform: uppercase;display: block; margin: 0 0 15px 0; font-weight: bold; } pre::after { content:'Double click to selection'; padding: 2px 10px; width: auto; height: auto; position:absolute; right: 8px; top: 8px; color: #fff; line-height: 20px; transition: all 0.3s ease-in-out; } pre:hover::after { opacity: 0; top: -8px; visibility: visible; } code{ font-family: Consolas,Monaco,' Andale Mono','Courier New',Courier,Monospace; line-height: 16px; color: #88a9ad; background-color: transparent; padding: 1px 2px; font-size: 12px; } pre code { display: block; background: none; border: none; color:#e9e9e9; direction: ltr; text-align: left; word-spacing: normal; padding: 0 0; font-weight: bold; } code .token.punctuation { color: #ccc; } pre code .token.punctuation{ color: #fafafa; } code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata { color: #777; } code .namespace { opacity: .8; } code .token.property,code .token.tag,code .token.boolean,code .token.number { color:#e5dc56; } code .token.selector,code .token.attr-name,code .token.string { color:#88a9ad; } pre code .token.selector,pre code .token.attr-name { color: #fafafa; } pre code .token.string { color: #40ee46; } code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string { color: #ccc; } code .token.operator { color: #1887dd; } code .token.atrule,code .token.attr-value {color: #009999; } pre code .token.atrule,pre code .token.attr-value { color: #1baeb0;} code .token.keyword { color: #e13200; font-style: italic; } code .token.comment {font-style: italic; } code .token.regex { color: #ccc; } code .token.important {font-weight: bold; } code .token.entity { cursor: help; } pre mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px; border-radius: 2px; }code mark { background-color: #ea4f4e!important; color: #fff!important; padding: 2px;border-radius: 2px; } pre code mark { background-color: #ea4f4e!important; color:#fff!important; padding: 2px; border-radius: 2px; } .comments pre { padding: 10px 10px 15px 10px; background: #2c323c; } .comments pre::before { content: 'Code'; font-size: 13px; position: relative; top: 0; background-color: #f56954; padding: 3px 10px;left: 0; right: 0; color: #fff; text-transform: uppercase; display: inline-block;margin: 0 0 10px 0; font-weight: bold; border-radius: 4px; border: none; } .comments pre::after { font-size: 11px; } .comments pre code { color: #eee; } .comments pre.line-numbers { padding-left: 10px; } pre.line-numbers { position: relative;padding-left: 3.0em; counter-reset: linenumber; } pre.line-numbers > code { position:relative; } .line-numbers .line-numbers-rows { height: 100%; position: absolute;pointer-events: none; top: 0; font-size: 100%; left: -3.5em; width: 3em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 0; }.line-numbers-rows > span { pointer-events: none; display: block; counter-increment:linenumber; } .line-numbers-rows > span:before { content: counter(linenumber); color:#999; display: block; padding-right: 0.8em; text-align: right; transition: 350ms; }pre[data-codetype='CSSku']:before { background-color: #00a1d6; } pre[data-codetype='HTMLku']:before { background-color: #3cc888; } pre[data-codetype='JavaScriptku']:before { background-color: #75d6d0; } pre[data-codetype='JQueryku']:before { background-color: #e5b460; }

Setelah itu simpan 3 buah kode berikut ini sebelum kode </body> atau </head> pada struktur bawaan template yang anda gunakan

<script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>

<script>
$('pre').attr('class', 'line-numbers');
Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})
</script>

<script type='text/javascript'>
var pres = document.getElementsByTagName(&quot;pre&quot;);
for (var i = 0; i &lt; pres.length; i++) {
  pres[i].addEventListener(&quot;dblclick&quot;, function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
</script>
Selanjutnya kamu bisa save atau simpan perubahan template yang baru saja kamu edit dengan ditambahi seluruh kode diatas, dan untuk setiap penulisannya, gunakan cara berikut ini.
<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre> <pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre> <pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Share this :

Latest
Previous
Next Post »
0 Komentar

Penulisan markup di komentar
  • Silakan tinggalkan komentar sesuai topik. Komentar yang menyertakan link aktif, iklan, atau sejenisnya akan dihapus.
  • Untuk menyisipkan kode gunakan <i rel="code"> kode yang akan disisipkan </i>
  • Untuk menyisipkan kode panjang gunakan <i rel="pre"> kode yang akan disisipkan </i>
  • Untuk menyisipkan quote gunakan <i rel="quote"> catatan anda </i>
  • Untuk menyisipkan gambar gunakan <i rel="image"> URL gambar </i>
  • Untuk menyisipkan video gunakan [iframe] URL embed video [/iframe]
  • Kemudian parse kode tersebut pada kotak di bawah ini