Cara Membuat prism Syntax Highlighter Di Blogger

Cara Membuat prism Syntax Highlighter Di Blogger | Syntax Highlighter sangat cocok di gunakan untuk anda pengguna blog yang menyediakan tutorial blogging maupun tips blogging, sudah jelas blog yang menyediakan tutorial blog pasti akan mempostingkan Code yang berupa: HTML, CSS, JAVASCRIPT, dan JEQUERY nah Syntax Highlighter ini berfungsi untuk memperlihatkan code yang di posting dengan style yang lebih menarik, cantik, dan juga code akan menjadi lebih rapi.
penggunaan Syntax Highlighter ini juga sangat gampang hampir sama dengan menggunakan Blocquote yang membedakannya hanya dari segi tampilan saja.

Cara Membuat prims Syntax Highlighter Di Blogger

LIHAT DEMO

Langkah-Langkah Membuat prims Syntax Highlighter Di Blogger

1. Masuk terlebih dahulu/Loging ke Blog kamu
2. Jika Sudah Pilih Menu Template==>Edit Html
3. Silahkan anda cari code ]]></b:skin> atau </style> pada area Html lalu silahkan kamu copy pastekan code berikut tepat di atas salah satu codedi atas, untuk mempermudah pencarian code silahkan kamu klik

Ctrl

pada keyboard kamu

/* 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='CSS']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTML']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScript']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQuery']:before {
    background-color: #e5b460;
}

4. Selanjutnya jika code di atas sudah anda pasang lalu silahkan kamu sisipkan javascript di bawah ini tepat di bawah code ]]></b:skin>

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

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

Nah pada prosses pembuatan sudah selesai sekarang silahkan kamu save/simpan template kamu, sekarang kita masuk ke cara pemasangannya:
1. silahkan kamu buat postingan blog kamu terlebih dahulu, nah alihkan perhatian kamu pada bagian pojok kiri atas di sana ada pilihan Compose, dan HTML silahkan ubah dari mode Compose ke mode HTML lalu pastekan kode berikut pada area HTML
Syntax Highlighter: HTML

<pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"><code class=" language-markup"> &lt;pre class="line-numbers language-markup" data-codetype="HTML" title="HTML"&gt;&lt;code class=" language-markup"&gt; Taruh Script HTML Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Syntax Highlighter: CSS

<pre class="line-numbers language-css" data-codetype="CSS" title="CSS"><code class=" language-css"> &lt;pre class="line-numbers language-css" data-codetype="CSS" title="CSS"&gt;&lt;code class=" language-css"&gt; Taruh Script CSS Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Syntax Highlighter: JAVASCRIPT

<pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"><code class=" language-javascript"> &lt;pre class="line-numbers language-javascript" data-codetype="JavaScript" title="JavaScript"&gt;&lt;code class=" language-javascript"&gt; Taruh Script Java Script Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Syntax Highlighter: JQUERY

<pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"><code class=" language-jquery"> &lt;pre class="line-numbers language-jquery" data-codetype="JQuery" title="JQuery"&gt;&lt;code class=" language-jquery"&gt; Taruh Script JQuery Di Sini &lt;/code&gt;&lt;/pre&gt; </code></pre>

Note

Pada code yang sudah saya warnai merah silahkan kamu ganti dengan code yang ingin kamu postingkan, sesuaikan juga dengan judul Syntax Highlighter.

Nah bagai mana shobat cukup mudah bukan, Oky sampai di sini dulu yaaa pembahasan tutorial Cara Membuat prism Syntax Highlighter Di Blogger ini sampai ketemu lagi di Frequenzi yang sama

SELAMAT MENCOBA