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 sebelum kode 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 setelah kode <head>

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

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

No comments:

Post a Comment

1. Berikan Komentar yang Relevan
2. Tidak Mengandung SARA
3. Berkomentar yang Sopan