Cara Membuat Prism Syntax Highlighter

Pada kesempatan kali ini, saya akan mecoba mengulas tentang sytax highliter yang terdapat di blog bacil ini. Tentunya para sobat blogger penasaran jenis syntax highliter apa yang digunakan di blog saya ini. Sebelum masuk ke jenis, apa syntax highliter itu? dan apa kegunaannya?. Oke langsung saja,beberapa pengertian tentang syntax highliter menurut para sobat blogger.

Apa Syntax Highliter itu?

Syntax Highliter - Adalah sekumpulan kode yang terdapat dalam suatu teks editor dalam berbagai warna, font, kategori sehingga akan membuat kode tersebut menjadi terstruktur dan menarik untuk dipahami serta dilihat.

Setelah kita tahu pengertian tentang Syntax highliter, mari kita mengulas beberapa jenis syntax highliter yang mungkin diterapkan pada blogger khususnya.

Jensi Syntax Highliter ada berapa?

Jenis Syntax Highliter - Ada 2 jenis syntax highliter yang ada di dunia blogging. Syntax Highliter.js dan Highliter.js. Syantx Highliter.js dapat dibedakan menjadi 4, salah satunya yang kita bahas kali ini yaitu PRISM Syntax Highliter.

Bagaimana cara membuatnya?

Pada dasarnya untuk membuat sebuah syntax highliter diperlukan blog dengan niche tutorial blog, tutorial pemrograman dll. Dalam hal ini blog harus dengan niche kode. Jika blog sobat kebanyakan memakai kode dengan jenis Javascript, CSS, JQuery, dll. Saya anjurkan untuk memakai syntax hughliter ini. Kenapa? karena untuk membuat struktur yang bagus dan tertata dalam sebuah kode, kita harus memasang syntax highliter ini. Ketika sobat sudah menggunakan syntax highliter, sobat tidak perlu lagi menambahkan <blockquote>....::ISI KODE::....</blockquote>. Tetapi hanya perlu menambahkan <pre>....::ISI KODE::....</pre>.

Pemakaian tag pre yang salah seperti ini <pre><code>...Masukan Kode Disini...</pre></code>

Sedangkan pemakaian yang benar seperti <pre><code>...Masukan Kode Disini...</code></pre>

Langsung saja sobat baca tutorial dibawah ini:

Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
Pada menu Dashboard, Pilih Template --> Edit HTML.
Cari kode ]]></b:skin> dengan cara
Ctrl
+
F
.
Kemuadian salin kode dibwah ini tepat dibawahnya.

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

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

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

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

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

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

Kemudian salin kode dibawah ini tepat diatas kode </body> dengan cara
Ctrl
+
F

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

Simpan

Penerapan Pada Postingan

Pada menu Dashboard, Pilih menu Post.
Kemudian pada halaman post, pilih tab HTML seperti pada gambar dibawah ini:

Setelah itu tambahkan kode berikut:

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

Untuk menyisipkan kodenya, pilih tab Compose dan ganti kata "Taruh Script HTML disini" dengan kode yang ingin sobat posting.

Begitulah cara untuk membuat Syntax Highliter dengan jenis PRISM. Tentunya ada banyak jenis syntax highliter yang ada diblogging. Silahkan sobat explore kembali.

Jika sobat ingin menggunakan CSS syntax highliter yang berbeda, sobat bisa gunakan CSS yang ada disini
Jika sobat ingin kustomisasi warna sendiri, sobat bisa gunakan kode warna yang terdapat disini

3 comments

Heri Lesmana 4 April 2015 at 04:49

Ko nomornya ga muncul sob ??
- Dewa Teknik 4 April 2015 at 13:07
  
  coba hapus js jquery salah satu sob,,Semoga Membantu :-)

To insert a code use code_here
To insert a quote use your_qoute
To insert a picture use url_image_here

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT 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;
	}