--> Skip to main content
Home Tips Blogging Cara Membuat Syntax Highlighter Berwarna

Cara Membuat Syntax Highlighter Berwarna

Cara Membuat Syntax Highlighter Berwarna -- Syntax Highlighter adalah sebuah kode rumit yang hampir mirip dengan blockquote. Namun admin akan sedikit menerjemahkan kedalam bahasa sendiri. Menurut Admin, syntax highlighter adalah sebuah fitur khusus yang berada di blog untuk proses pemindahan kode-kode bahasa pemrograman seperti halnya tulisan, warna teks, dan posisinya akan sama persis dengan yang berada di sebuah kode bahasa pemrograman yang sedang di pindahkan atau di copy ke dalam bentuk bahasa tulisan lain agar lebih mudah untuk dipelajari. Bedanya, blockquote hanya akan menghasilkan satu warna saja sedangkan syntax highlighter akan menghasilkan banyak warna. Baca juga: Cara Membuat Widget Melayang dengan SumoMe


Cara memasang syntax highlighter berwarna

Fungsi syntax highlighter adalah digunakan untuk membungkus kode CSS, HTML, Java Script, dan lain-lain. Jadi banyak blogger yang menggunakan fitur ini sebagai sarana untuk membuat tampilan kode-kode pemrograman jauh lebih rapi. Kerapian akan menciptakan rasa suka oleh pengunjung. Nah maka dari itulah admin akan senang hati untuk membagikan trik ini supaya membantu para blogger newbie dapat memasukkan kode-kode html dll jauh lebih rapi didalam postingan blog. Hal ini dikarenakan kalau hanya memakai fitur blockquote, blogger harus secara manual dalam memasukkan kode-kode tersebut. Enak mana? Manual atau otomatis? 😃.

Untuk memasang syntax highlighter di situs baik yang blogspot ataupun wordpress sama mudahnya. Beda antar keduanya ialah jika di wordpress, sobat blogger hanya diminta untuk menginstall plug in syntax highlighternya saja. Namun untuk blogger, sobat harus memasukkan kode HTML yang cukup rumit. Tapi tidak masalah, semua tentu dapat diatasi jika sobat tekun dan teliti. Mari kita coba untuk memasukkannya. Baca juga: Cara Membuat Tombol Slide Demo dan Download

Cara Memasang Syntax Highlighter Berwarna

Berikut ini adalah cara termudah untuk memasang syntax highlighter berwarna di blog. Sebenarnya kode-kode html, CSS dll tidak diberi hal ini sebenarnya juga tidak apa-apa. Hanya saja dengan cara atau metode ini sobat akan lebih mudah dalam menatanya. Bagaimana caranya?
  • Pertama masuk terlebih dahulu ke dashboard Blogger
  • Klik Pada tab "Template" → "Edit HTML"
  • Tekan CTRL + F
  • Ketikkan ]]></b:skin> atau </style>
  • Copy dan Paste kode dibawah ini tepat diatas kode tersebut

/* CSS 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 untuk Menyeleksi Semua';
    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: #C2C2C2;
}

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: #DA382B;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #11CE7E;
}

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: #0C8CAE;
}

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;
 border-left: 1px solid #5F5F5F;
 padding-left: 9px;
}

.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;
}
pre code{display:block}=
pre .comment,pre .template_comment,pre .diff .header,pre .doctype,pre .pi,pre .lisp .string,pre .javadoc{color:#2DCFF2;font-style:italic}
pre .keyword,pre .winutils,pre .method,pre .addition,pre .css .tag,pre .request,pre .status,pre .nginx .title{color:#E6D90C}
pre .number,pre .command,pre .string,pre .tag .value,pre .rules .value,pre .phpdoc,pre .tex .formula,pre .regexp,pre .hexcolor{color:#EB4F4F}
pre .title,pre .localvars,pre .chunk,pre .decorator,pre .built_in,pre .identifier,pre .vhdl .literal,pre .id,pre .css .function{color:#03C425}
pre .attribute,pre .variable,pre .lisp .body,pre .smalltalk .number,pre .constant,pre .class .title,pre .parent,pre .haskell .type{color:#1B6FC3}
pre .preprocessor,pre .preprocessor .keyword,pre .shebang,pre .symbol,pre .symbol .string,pre .diff .change,pre .special,pre .attr_selector,pre .important,pre .subst,pre .cdata,pre .clojure .title,pre .css .pseudo{color:#D94CEA}
pre .deletion{color:#dc322f}
pre .tex .formula{background:#073642}
.comments pre {padding:10px 10px 15px 10px;background:#333;}
.comments pre::before {content:'Code';font-size:13px;position:relative;top:0;
background-color:#e25633;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 code {color:#eee;}

  • Jika sudah, carilah kode </head>
  • Copy dan Pastekan Kode dibawah ini tepat diatas kode tersebut.

<script src='https://sites.google.com/site/fansublogger/javascript/SyntaxHighlighterbyFansublogger.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>
<script src='http://bloggertut.googlecode.com/svn/trunk/js/highlight.pack.js'/>
<script>
hljs.initHighlightingOnLoad();
</script>

  • Terakhir, Klik "Simpan" supaya data yang dimasukkan bisa diintegrasikan dengan template sobat semua.
Pada tahap ini sebenarnya pemasangan syntax highlighter sudah berhasil. Namun, untuk penggunaan di artikelnya yang masih perlu untuk dijelaskan lebih dalam kembali. Maka ikuti langkah berikut agar syntax yang sudah dimasukkan dapat dipakai. Baca juga: Cara Memasang Populer Post Warna-Warni


Cara Menggunakan Syntax Highlighter di Artikel

Ini adalah tahap selanjutnya selepas memasang kode CSS dan JS yang ada di kode HTML template sobat semua. Caranya cukup mudah karena hanya memakai satu atau dua kode saja. Apa itu?
  • Sobat blogger cukup menggunakan kode pemanggil berikut ini dan mempastekannya pada mode "HTML" saat menulis artikel
  • Jangan tempatkan dalam mode "Compose"

<pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>


<pre title="CSS" data-codetype ="CSSku"><code class="language-css"> ... kode CSS di sini ... </code></pre>


<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>


<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre>

Begitulah kurang lebih tata cara memasang syntax highlighter berwarna di blog. Jika masih belum berhasil mungkin ada kode yang masih belum terpasang. Jadi mohon dengan teliti ketika memasangkannya. Yap semoga bermanfaat dan ketemu lain waktu ya... salam blogging.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar