Cara Memasang Prism.js Syntax Highlighter

Pengertian syntax highlighter menurut saya adalah kode pada suatu web yang dibuat berbeda sehingga kode tersebut terlihat mencolok. Kode ini dapat dengan mudah dilihat, sesuai dengan aslinya dan ini bisa dengan mudah di copy paste.

Template Blog High CTR

Bagaimana cara membuat syntax highlighter ?
Simak baik baik :

Copy script dibawah ini


<script src="https://rawgit.com/danilrafiqi/assets/master/javascript/prism.js"/>

Lalu letakkan kode javascript setelah kode <head>

Kemudian copy code css dibawah ini

/* http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre[class*="language-"] {
 color: #f8f8f2;
 background: none;
 text-shadow: 0 1px rgba(0, 0, 0, 0.3);
 font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
 text-align: left;
 white-space: pre;
 word-spacing: normal;
 word-break: normal;
 word-wrap: normal;
 line-height: 1.5;

 -moz-tab-size: 4;
 -o-tab-size: 4;
 tab-size: 4;

 -webkit-hyphens: none;
 -moz-hyphens: none;
 -ms-hyphens: none;
 hyphens: none;
}

/* Code blocks */
pre[class*="language-"] {
 padding: 1em;
 margin: .5em 0;
 overflow: auto;
 border-radius: 0.3em;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
 background: #272822;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
 padding: .1em;
 border-radius: .3em;
 white-space: normal;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
 color: slategray;
}

.token.punctuation {
 color: #f8f8f2;
}

.namespace {
 opacity: .7;
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
 color: #f92672;
}

.token.boolean,
.token.number {
 color: #ae81ff;
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
 color: #a6e22e;
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
 color: #f8f8f2;
}

.token.atrule,
.token.attr-value,
.token.function {
 color: #e6db74;
}

.token.keyword {
 color: #66d9ef;
}

.token.regex,
.token.important {
 color: #fd971f;
}

.token.important,
.token.bold {
 font-weight: bold;
}
.token.italic {
 font-style: italic;
}

.token.entity {
 cursor: help;
}

kemudian simpan css setelah kode <b:skin>

Setelah itu silakan disimpan

Cara memakai nya adalah seperti dibawah ini


<pre><code class="language-danilrafiqi">Kode Kamu Disini
</code></pre>

Ganti "danilrafiqi" dengan "markup" untuk kode html. "css" untuk kode "css" dan "javascript" untuk kode "javascript". Dan letakkan kode anda di "Kode Kamu Disini".
Sehingga contohnya menjadi class='language-javascript'

Sekian post kali ini semoga bermanfaat. Terimakasih telah membaca cara pasang syntax highlighter

Cara Memasang Prism.js Syntax Highlighter

0 Response to "Cara Memasang Prism.js Syntax Highlighter"

Post a Comment