Latest News

Cara Membuat dan Menggunakan Syntax Highlighter Di Blogger

Kotak untuk meletakkan arahan HTML ini sering disebut Prism Syntax Highlighter. Syntax Highlighter ini sering digunakan untuk meletakkan arahan HTML,CSS,JavaScript,dan arahan lainnya. Bagi anda yang memiliki blog tutorial pasti tidak gila dengan Syntax Highlighter ini. Syntax Highlighter ini membantu dalam membagikan tutorial blogging yang harus membagikan kode.

Jika anda hanya mengganti warna arahan saat anda membagikan arahan si postingan mungkin akan membuat pengunjung anda resah walaupun sudah dibedakan dengan warna. Mereka akan kesulitan untuk mencari arahan yang harus disalin.

Banyak cara memang untuk menampilkan arahan di postingan menyerupai menggunakan fitur blockquote,namun terkadang blockquote sudah digunakan untuk keperluan lain. Maka kita memakai kotak script arahan syntax highlighther.

Cara Membuat dan Menggunakan Syntax Highlighter Di Blogger

Kekurangannya yaitu dalam pemanggilannya. Kita harus menyalin arahan pemanggil atau kalau kita hafal arahan pemanggil. Berbeda kalau kita menggunakan fitur blockquote tinggal klik saja beres. Namun kelebihannya disini mampu membedakan mana arahan CSS,HTML,dan Javascript.

Syntax Highlighter ini aku lihat pertama kali ini blog ArlinaDesign. Selain membantu pengunjung dalam membantu pengunjung dalam menyalin kode,Syntax Highlighter juga membuat tampilan blog tidak amburadul kalau arahan yang kita bagikan panjang dan banyak. Langsung saja berikut caranya :

Cara Memasang Prism Syntax Highlighter

Langkah 1
Silakan masuk dulu ke blogger, lalu Template → Edit HTML

Langkah 2
Silakan salin CSS dibawah ini,lalu letakkan diatas arahan </style>

/* CSS Prism Syntax Highlighter */ 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='CSSku']:before {     background-color: #00a1d6; }  pre[data-codetype='HTMLku']:before {     background-color: #3cc888; }  pre[data-codetype='JavaScriptku']:before {     background-color: #75d6d0; }  pre[data-codetype='JQueryku']:before {     background-color: #e5b460; }

Langkah 3
Salin arahan HTML dibawah ini lalu letakkan diatas arahan </head> atau </body>

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

Jangan lupa untuk menyimpan template.

Sekarang untuk mulai menggunakan Syntax Highlighter maka anda harus membuat post gres pada postingan mode HTML dengan arahan pemanggil dibawah ini.

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... arahan HTML (yang sudah di`escape`) di sini ... </code></pre> <pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... arahan CSS di sini ... </code></pre> <pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... arahan JavaScript di sini ... </code></pre> <pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... arahan jQuery di sini ... </code></pre>

Silakan gunakan arahan pemanggil diatas sesuai dengan jenis arahan apa yang akan anda bagikan.

Sebelum anda memasukkan arahan yang akan anda bagikan anda harus memparse kodenya terlebih dahulu. Selesai. Itulah tutorial cara membuat syntax highlighter. Semoga bermanfaat. See you next article.