Cara Membuat Prism Syntax Highlighter

zoct net cinema

blogger, tutorial

Belum ada komentar

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:

1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
2. Pada menu Dashboard, Pilih Template --> Edit HTML.
3. Cari kode ]]></b:skin> dengan cara 
   Ctrl
   +
   F
4. 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: '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;
}

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

Ctrl

+

F

Simpan

6. Simpan

Penerapan Pada Postingan

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

 

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

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

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

sumber: http://bacilsoft.blogspot.com