Cara Membuat Prism Syntax Highlighter Keren Di Blog

Selamat datang agan atau aganwati kali ini, Saya akan berbagi cara membuat syntax highlighter seperti Arliana Design di blog, untuk menerapkan di blog Anda silakan ikuti beberapa langkah berikut;

Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template,

3. Lalu pilih menu edit html,

4. Cari kode ]]></b:skin> dengan cara

Ctrl

5. Copy script di bawah ini,

 /*CSS Syntax Hightler */
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: &#39;Double click to selection&#39;;
    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,&#39;
    Andale Mono&#39;,&#39;Courier New&#39;,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: &#39;Code&#39;;
    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 &gt; 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 &gt; span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows &gt; span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype=&#39;CSS&#39;]:before {
    background-color: #00a1d6;
}

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

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

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

6. Paste script yang sudah dicopy tadi tepat di atas kode ]]></b:skin>,

7. Lalu cari kode </body> dengan cara

Ctrl

8. Copy script di bawah ini,

 <script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/>
<script>
$(&#39;pre&#39;).attr(&#39;class&#39;, &#39;line-numbers&#39;);
Prism.hooks.add(&quot;after-highlight&quot;,function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf(&quot;line-numbers&quot;)===-1){return}var n=1+e.code.split(&quot;\n&quot;).length;var r;lines=new Array(n);lines=lines.join(&quot;<span/>&quot;);r=document.createElement(&quot;span&quot;);r.className=&quot;line-numbers-rows&quot;;r.innerHTML=lines;if(t.hasAttribute(&quot;data-start&quot;)){t.style.counterReset=&quot;linenumber &quot;+(parseInt(t.getAttribute(&quot;data-start&quot;),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>

9. Lalu paste script yang sudah dicopy tepat di atas kode </body>,

8. Simpan.

Penerapan

1. Pada saat menerapkan pada posting pilih menu html,

2. Setelah itu tambahkan kode di bawah ini setiap akan memakai penerapan,

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

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

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

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

3. Untuk menambahkan script pada syntax highlighter, kembalikan jenisnya menjadi compose,

4. Contoh pengisian syntax highlighter,

5. Kalimat "Taruh Script Di Sini" diganti dengan script yang akan Anda pasang,

6. Selesai.

Nah mungkin itu saja dari Saya semoga bermanfaat jangan lupa bagikan dan tinggalkan komentar, terima kasih.

Catatan pinggir

Obrolan pembaca 11

Punya pengalaman serupa, pertanyaan, atau koreksi? Tulis di pinggir halaman ini. Setiap catatan dibaca langsung oleh penulis.

Bingung mau mulai dari mana? Ketuk salah satu, lalu tempel di kolom komentar:

Comments

Anonymous13 January 2015 at 08:42
sob! klw sperti punya sobat bagaimana sob?
Anonymous18 January 2015 at 08:15
Sob kok ane coba dan ikutin langkah" nya jadi nya seperti ini (blog lain) http://pengetahuansg.blogspot.com/2014/12/saya-oig-ioahgo-ahgg-gagha-aigrhairgh.html itu faktor template, atau scriptnya yang kurang sob!
*mohon petunjuknya sob! :2thumbup
Unknown18 January 2015 at 10:28
tolong dong di modifikasi template blog yang kemarin
Unknown16 February 2015 at 21:50
thx gan :2thumbup
Unknown25 May 2015 at 08:21
mantap gan :2thumbup

Cara Membuat Prism Syntax Highlighter Keren Di Blog

Langkah

Penerapan

Obrolan pembaca 11

Comments

Post a Comment

Kontak

Cari tulisan

Pantau tulisan baru

Paspor Pembacaku

Langkah

Penerapan

Baca juga

Comments

Post a Comment

Kontak