Cara Membuat Syntax Highlighting Pada Blog Versi 1

Apa itu Syntax Highlighting dan apa fungsinya ?, Syntax Highlighting atau Syntax Highlighter adalah fitur pada teks editor yang menampilkan atau menyoroti teks baik sebagian atau seluruh terutama source code dalam berbagai warna, font, model dan sebagainya sesuai dengan kategori istilah yang digunakan/ diinginkan.

Fungsinya selain mempercantik tampilan, dengan menggunakan Syntax Highlighting penulis atau pembaca dapat dengan mudah mengenal contoh source code atau bahasa terstruktur seperti bahasa pemrograman (programming language) atau bahasa markup (markup language).

Implementasi dari Syntax Highlighting ini bisa pada halaman website, blog atau forum online. Seringnya digunakan sebagai kode Prensentasi pada contoh source code seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Java, SQL, Apache, Haskell, Erlang, Ruby, C++, Objective C dan lainnya.

Sebagai referensi ada cukup banyak pilihan syntax highlighter yang dapat digunakan dengan berbagai kekurangan dan kelebihan yang dimilikinya, berikut diantaranya Syntax Highlighter, Highlight.JS, GeSHi (Generic Syntax Highlighter), Google Code Prettify, DlHighlight, Beauty Of Code, JUSH (Javascript Syntax Highlighter), Pygments (Python Syntax Highlighter), SHJS (Syntax Highlighting in JavaScript), Chili, CodePress dan sebagainya.

Mungkin sahabat bisa lihat Demo biar lebih jelas seperti apa Syntax Highlighting yang dimaksud? 🤔.

Bagaimana cara membuat dan memasangnya di blog?, berikut tutorial

Cara Membuat Syntax Highlighting Pada Blog Versi 1.

1. Budayakan membaca dan mencoba sebelum sahabat berkomentar.
2. Tutorial yang saya bagikan sudah 100% berfungsi di template Blogger bawaan ataupun template modifikasi pada umumnya (tergantung pada template yang sahabat gunakan).
3. Selamat mencoba dan tetap semangat...

• Direkomendasikan ikuti langkah demi langkah terlebih dahulu tanpa harus merubah/ mengganti sebagian atau seluruh kode CSS, JS atau HTML yang diberikan. Modifikasi dilakukan setelah kode tersebut berhasil diterapkan pada template.

• Backup Template sebelum merubah sebagian atau seluruh dari isi template, guna menghindari terjadinya kesalahan / ketidak sesuaian/ erorr saat merubahnya nanti. Berikut dibawah ini cara backup template bagi yang belum mengetahuinya.

×

1 / 4

2 / 4

3 / 4

4 / 4

❮ ❯

• Pelajari dan pahami HTML tag <pre> dan </pre>, sebagai referensi bisa lihat Disini. Kode tersebut diatas adalah kode dasar untuk memanggil/ menampilkan Syntax Highlighting pada postingan blog.

• Login Blogger > Menu Theme > Edit HTML
• Cari kode </style> atau </body> pada template, untuk mempercepat dan mempermudah gunakan shortcut Ctrl + F
• Copy All seluruh kode CSS dibawah ini kemudian
  
  

  
  /* ===== CSS Syntax Highlighter V 1 ===== */
  .code
  {
   display: block;
   max-height: 500px;
   width: 100%;
   margin: 20px 0;
   font-family: monospace;
   font-size: 13px;
   line-height: 23px;
   position: relative;
   overflow: auto
  }
  
  .code .numbers, .code .source { float: left }
  
  .code .numbers
  {
   padding: 10px;
   text-align: right
  }
  
  .code .source { padding: 10px 0 }
  .code .source .line:nth-child(2n) { }
  .code .source .line { padding: 0 10px }
  .code .source .comment { font-style: italic }
  
  .code .copy
  {
   position: absolute;
   right: 10px;
   top: 5px;
   font-size: 12px;
   text-decoration: underline;
   cursor: pointer
  
  }
  
  /* STYLES for CODE*/
  .code-style-light
  {
   color: #444;
   background: #f5f5f5;
  }
  .code-style-light .numbers
  {
   color: #999;
   background: #fff;
  }
  .code-style-light .source .line:nth-child(2n) {background: #f2f2f2}
  .code-style-light .source .comment {color: #3FAB46}
  
  /* CSharp */
  .code-style-light .source .c-pppvaovcsn {color: #E05366}
  .code-style-light .source .c-iescbrnu {color: #6593E0}
  
  .code-style-dark
  {
   color: #E6E6E6;
   background: #333;
  }
  .code-style-dark .numbers
  {
   color: #999;
   background: #fff;
  }
  .code-style-dark .source .line:nth-child(2n) {background: #363636}
  .code-style-dark .source .comment {color: #588A5B}
  
  /* CSharp */
  .code-style-dark .source .sharp-keywords {color: #DF5D6E}
  .code-style-dark .source .sharp-default-types {color: #718DBD}
  /* --------------------------------------------------------- */
  

  
  
• Paste tepat diatas atau sebelum kode </style> atau </body> tersebut.
• Save Template
• Untuk modifikasi lanjutan perihal tampilan nanti bisa dirubah pada kode CSS ini.

• Masih pada > Menu Theme > Edit HTML
• Cari kode </body> pada template, untuk mempercepat dan mempermudah gunakan shortcut Ctrl + F
• Copy All seluruh kode JavaScript dibawah ini kemudian
  

  
  <script> 
  $(document).ready(function() {
   $("pre").makeCode({
    style: "code-style-dark",
    addons: [{ name: "js", parser: javascriptCode }]
   });
  });
  
  var javascriptCode = function(text) {
   return text;
  };
  
  // All shit
  
  var csharpCode = function(text) {
   var comment = false;
   var lines = text.split("\n");
   text = "";
  
   for (var i = 0; i < lines.length; i++) {
    var line = lines[i];
  
    line = line
     .replace(
      /(public|private|protected|static|virtual|abstract|override|class|struct|new)\b/gi,
      '<span class="sharp-keywords">$1</span>'
     )
     .replace(
      /\b(if|else|switch|case|break|return|namespace|using|while|bool|int|float|double|true|false|void)\b/gi,
      '<span class="sharp-default-types">$1</span>'
     )
     .replace(/(\/\/(.*)$)/g, '<span class="comment">$1</span>');
  
    if (!comment) {
     // Multiline comments shit
     var result1 = line.match(/\/\*([\s\S]*?)\*\//gi);
  
     if (result1 != null) {
      for (var r = 0; r < result1.length; r++) {
       line = line.replace(result1[r], '<span class="comment">$&</span>');
      }
     } else {
      var result = line.match(/\/\*([\s\S]*?)[\s\S]*/i);
  
      if (result != null) {
       line = line.replace(result[0], '<span class="comment">$&</span>');
  
       comment = true;
      }
     }
    } else {
     var result = line.match(/[\s\S]*\*\/|\*\//);
  
     if (result != null) {
      line = line.replace(result[0], '<span class="comment">$&</span>');
  
      comment = false;
     } else {
      line = '<span class="comment">' + line + "</span>";
     }
    }
  
    text += line;
    if (i != lines.length - 1) text += "\n";
   }
  
   return text;
  };
  
  var htmlCode = function(text) {
   return text;
  };
  
  (function($) {
   $.fn.makeCode = function(options) {
    var settings = $.extend(
     {
      style: "code-style-light",
      selectLabel: "Select All",
      addons: []
     },
     options
    );
  
    var defaultAddons = [
     { name: "csharp", parser: csharpCode },
     { name: "html", parser: htmlCode }
    ];
  
    options.addons = options.addons.concat(defaultAddons);
    defaultAddons = null;
  
    //replace html tags
    function replaceTag(tag) {
     var tagsToReplace = { "&": "&amp;", "<": "&lt;", ">": "&gt;" };
     return tagsToReplace[tag] || tag;
    }
    function safe_tags_replace(str) {
     return str.replace(/[&<>]/g, replaceTag);
    }
  
    function getAddon(name) {
     var result = null;
     options.addons.forEach(function(item, i, arr) {
      if (item.name == name) result = item;
     });
     return result;
    }
  
    $(this).each(function() {
     $this = $(this);
     var syntax = $this.prop("class").replace("syntax-", "");
     var text = $this.html();
  
     text = safe_tags_replace(text);
  
     var addon = getAddon(syntax);
  
     if (addon != null) text = addon.parser(text);
  
     var splitter = text.split(/\n/);
  
     text = "";
  
     for (var s = 0; s < splitter.length - 1; s++) {
      if (splitter[s].length > 0) {
       text +=
        '<div class="line">' +
        splitter[s]
         .replace(/^ +/gm, "\t")
         .replace(/\t/g, "&nbsp;&nbsp;&nbsp;&nbsp;") +
        "</div>";
      } else {
       text += '<div class="line"><br></div>';
      }
     }
  
     $this.before(
      '<div class="code ' +
       settings.style +
       '"><div class="copy">' +
       settings.selectLabel +
       '</div><div class="numbers"></div><div class="source">' +
       text +
       '</div><div class="clear"></div></div>'
     );
  
     for (var i = 1; i < splitter.length; i++) {
      var height = $this
       .prev()
       .find(".source .line")
       .eq(i - 1)
       .height();
      $this
       .prev()
       .find(".numbers")
       .append('<div style="height: ' + height + 'px">' + i + "</div>");
     }
  
     $this
      .prev()
      .find(".source")
      .width(
       $this.prev().width() -
        ($this
         .prev()
         .find(".numbers")
         .width() +
         37)
      );
     $this.remove();
    });
  
    // fixed link
    $(".code").scroll(function() {
     var top = $(this).scrollTop();
     $(this)
      .find(".copy")
      .css("top", top + 5);
    });
  
    // select a code
    $(".code .copy").on("click", function(e) {
     selectText(this.parentNode.getElementsByClassName("source")[0]);
    });
  
    // select a line of code
    $(".code .numbers div").on("click", function(e) {
     var line = $(this)
      .parent()
      .parent()
      .find(".source .line")
      .eq($(this).index());
     selectText(line.get(0));
    });
  
    $(window).resize(function() {
     // --- ?
    });
  
    function selectText(node) {
     var e = node,
      s,
      r;
  
     if (window.getSelection) {
      s = window.getSelection();
      r = document.createRange();
      r.selectNodeContents(e);
      s.removeAllRanges();
      s.addRange(r);
     } else if (document.selection) {
      r = document.body.createTextRange();
      r.moveToElementText(e);
      r.select();
     }
    }
   };
  })(jQuery);
  
  </script>
  
  

• Paste tepat diatas atau sebelum kode </body> tersebut.
• Save Template
• Parse
terlebih dahulu kode tersebut Disini Apabila terjadi error message saat menyimpan template.

• Login Blogger > Posts > Pilih New Posts atau Edit Posts > terdapat menu Compose dan HTML mode > Pilih HTML
• Tulis atau pasang kode Syntax Highlighting dibawah ini sesuai dengan kategori yang ingin digunakan.

<pre class="syntax-csharp">
Bagian ini Isi dengan kode 
</pre>

<pre class="syntax-html">
Bagian ini Isi dengan kode 
</pre>

• Lihat hasilnya sementara dahulu di Preview. Jika sudah merasa yakin semua berjalan dengan baik diterapkan pada template sahabat, silahkan Update untuk postingan edit atau Publish untuk postingan baru.

• Selamat, besar kemungkinan jika sahabat mengikuti setiap langkah demi langkah pasti akan berhasil membuat dan memasangnya seperti Demo diatas.
• Modifikasi lanjutan untuk tampilan sesuai dengan selera sahabat pada kode CSS diatas.
• Demo Syntax Highlighting Pada Blog Versi 1 ini hanya sebagai referensi dibuat dengan properties CSS yang bisa sahabat kembangkan kembali menjadi model tampilan yang lebih menarik dan bagus tentunya.
• Download file lengkap .txt tutorial ini sebagai media pembelajaran.

Silahkan sahabat memodifikasi lanjut untuk penempatan, ukuran, warna, dan model gambar disesuaikan dengan gaya template sahabat. Hindari memodifikasi yang berlebihan terkadang malah jadi menggangu baik tampilan maupun fungsi.

Demikian semoga membantu...

Please Share

• style='margin-right: 30px' target='-blank'>

Artikel Lainnya Terkait Costumized