Cara Memasang Syntax Highlighter di Blogger


0

Kamu pernah lihat sebuah blog tutorial yang menampilkan kode warna-warni? Ya, itu adalah Syntax Highlighter. Dengan menggunakan Syntax Highlighter, kita bisa menampilkan kode berupa HTML, CSS, PHP, JavaScript atau yang lainnya dalam bentuk kode dengan warna-warni dan dengan susunan karakter yang tersusun rapi.

Kebetulan, kali ini akan dibahas tentang cara memasang Syntax Highlighter di blog berplatform Blogger. Syntax Highlighter ini sangat cocok untuk blog-blog dengan niche tutorial, web design, dan blog-blog dengan tema seputar coding. Tutor ini saya ambil dari blog milik +Kang Ismet & +Saeful Rahman.

Langkah pertama :

Pertama-tama yang harus kamu lakukan adalah masuk ke menu template editor. lalu salin kode CSS berikut dan paste kode tersebut sebelum atau diatas kode ]]></b:skin>. Berikut CSS yang harus disalin:

/*Syntax Highlighter*/
pre {
    padding: .8em 1em;
    margin: 0.5em 0;
    background-color: #2F3741;
    border: 1px solid #ddd;
    font-size: 13px;
    color: #000;
    font-family: Consolas, Monaco, 'Andale Mono', 'Courier New', Courier, Monospace;
    line-height: 1.4em;
    position: relative;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow: auto;
    max-height: 200px;
}
code {
    font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, Monospace;
    font-size: 13px;
    color: #d14;
}
#comment-holder code {
    color: #e59304;
}

pre code {
    padding: 0!important;
    color: #839496;
    background: none!important;
    border: none!important;
    display: block;
}
pre .comment, pre .template_comment, pre .diff .header, pre .doctype, pre .pi, pre .lisp .string, pre .javadoc {
    color: #93a1a1;
    font-style: italic;
}
pre .keyword, pre .winutils, pre .method, pre .addition, pre .css .tag, pre .request, pre .status, pre .nginx .title {
    color: #F5821E;
}
pre .number, pre .command, pre .string, pre .tag .value, pre .rules .value, pre .phpdoc, pre .tex .formula, pre .regexp, pre .hexcolor {
    color: #008800;
}
pre .title, pre .localvars, pre .chunk, pre .decorator, pre .built_in, pre .identifier, pre .vhdl .literal, pre .id, pre .css .function {
    color: #268bd2;
}
pre .attribute, pre .variable, pre .lisp .body, pre .smalltalk .number, pre .constant, pre .class .title, pre .parent, pre .haskell .type {
    color: #A2886F;
}
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: #000;
    font-weight: bold;
}
pre .deletion {
    color: #dc322f;
}
pre .tex .formula {
    background: #eee8d5;
}

Langkah Kedua

Selanjutnya, masih di template HTML editor. Temukan kode </head> dan letakkan kode berikut diatasnya.

<!-- Syntax Highlighter -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.rawgit.com/KompiAjaib/js/master/highlight2.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>
</b:if>

Langkah Ketiga :

Selanjutnya, kamu harus menemukan kode </body> dan letakkan kode berikut di atasnya.

<!-- Syntax Highlighter JS -->
<script type='text/javascript'>
//<![CDATA[
$("#comment-holder").each(function () {
    $('i[rel="pre"]', this).replaceWith(function () {
        return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
    });
    $('i[rel="image"]', this).replaceWith(function () {
        return $('<img class="gambarnya" src="" />').attr("src", $(this).text())
    });
    $('b[rel="quote"]', this).replaceWith(function () {
        return $("<blockquote></blockquote>").append($(this).contents())
    });
    $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
});
//]]>
</script>
<!-- Syntax Highlighter JS End -->

Setelah itu simpan template kamu. Sekarang akan saya jelaskan cara menggunakannya.

Cara Penggunaan

Untuk cara penggunaan Syntax Highlighter ini sangatlah mudah, kamu hanya perlu menuliskan kode :

<pre><code>
.........................................................
.........................................................
<!-- Kode yang sudah di Parse di letakkan disini -->
.........................................................
.........................................................
</code></pre>

Untuk menyisipkan kode, gambar, dan blockquote pada komentar, masukkan kode berikut jika kamu ingin menyisipkannya pada komentar:
1. Untuk memasukkan tag kode pendek masukkan :

<i rel="code">Tulis kode yang sudah diparse di sini</i>

2. Untuk memasukkan tag kode panjang masukkan :

<i rel="pre">Tulis kode yang sudah diparse di sini</i>

3. Untuk memasukkan blockquote, masukkan :

<b rel="quote">Tulis catatan di sini</b>

4. Untuk memasukkan gambar, masukkan :

<i rel="image">Tulis URL gambar di sini</i>

Ingat, kode yang akan ditampilkan harus sudah di parse, dan ketika menulis artikel harus menggunakan versi HTML, bukan COMPOSE. Untuk mengetahui bagaimana cara mem-parse kode akan saya kasih tau pada artikel selanjutnya. Terimakasih.


Like it? Share with your friends!

0

What's Your Reaction?

Bangga Bangga
0
Bangga
Keren Keren
0
Keren
Lucu Lucu
0
Lucu
Sedih Sedih
0
Sedih
Wow Wow
0
Wow
Marah Marah
0
Marah
Takut Takut
0
Takut

Legend

Pecinta ayam goreng, tempe penyet dan klepon.

Comments

comments

5 Comments

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

  1. Test ya gan padding: .8em 1em;
    margin: 0.5em 0;
    background-color: #2F3741;
    border: 1px solid #ddd;
    font-size: 13px;
    color: #000;

    1. Kok jadinya gitu gan?? Gak gini …

      <!– Syntax Highlighter JS –>
      <script type='text/javascript'>
      //<![CDATA[
      $("#comment-holder").each(function () {
      $('i[rel="pre"]', this).replaceWith(function () {
      return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
      });
      $('i[rel="image"]', this).replaceWith(function () {
      return $('<img class="gambarnya" src="" />').attr("src", $(this).text())
      });
      $('b[rel="quote"]', this).replaceWith(function () {
      return $("<blockquote></blockquote>").append($(this).contents())
      });
      $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
      });
      //]]>
      </script>
      <!– Syntax Highlighter JS End –>

  2. <!– Syntax Highlighter JS –>
    <script type='text/javascript'>
    //<![CDATA[
    $("#comment-holder").each(function () {
    $('i[rel="pre"]', this).replaceWith(function () {
    return $("<pre></pre>").append($("<code></code>").append($(this).contents()))
    });
    $('i[rel="image"]', this).replaceWith(function () {
    return $('<img class="gambarnya" src="" />').attr("src", $(this).text())
    });
    $('b[rel="quote"]', this).replaceWith(function () {
    return $("<blockquote></blockquote>").append($(this).contents())
    });
    $('i[rel="code"]', this).contents().unwrap().wrap("<code/>")
    });
    //]]>
    </script>
    <!– Syntax Highlighter JS End –>

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format