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.
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("pre");
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script><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>
0 Komentar
Penulisan markup di komentar