Cara Membuat Syntax Highlighting Pada Blog Versi 2

Syntax Highlighting/ Highlighter

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

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, sebagai referensi bisa lihat Disini..

• 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 2 =====*/
  .boxcode {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
  }
  
  .active, .boxcode:hover {
      background-color: #ccc;
  }
  
  .boxcode:after {
      content: '\002B';
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
  }
  
  .active:after {
      content: "\2212";
  }
  
  .boxpanel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }
  /* --------------------------------- */
  

  
  
• Paste tepat diatas atau sebelum kode </style> atau </body> tersebut.
• Save Template
• 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 src="https://www.w3schools.com/lib/w3codecolor.js"></script>
  
  <script>
  w3CodeColor();
  </script>
  
  <script>
  var acc = document.getElementsByClassName("boxcode");
  var i;
  
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
        panel.style.maxHeight = null;
      } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
      } 
    });
  }
  </script>
  
  

• Paste tepat diatas atau sebelum kode </body> tersebut.
• Save Template
• Parse Kode terlebih dahulu 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.

button class="boxcode">HTML Example</button>
<div class="boxpanel">
<div class="w3-code htmlHigh notranslate" style="background:none;border: 3px solid #f2f2f2; font-family: &quot;courier new&quot;; margin-bottom: 10px; margin-top: 10px; padding: 10px;">

Isi dengan kode HTML yang sudah di Parse terlebih dahulu 

</div>
</div>

button class="boxcode">CSS Example</button>
<div class="boxpanel">
<div class="w3-code htmlHigh notranslate" style="background:none;border: 3px solid #f2f2f2; font-family: &quot;courier new&quot;; margin-bottom: 10px; margin-top: 10px; padding: 10px;">

Isi dengan kode HTML yang sudah di Parse terlebih dahulu 

</div>
</div>

button class="boxcode">JavaScript Example</button>
<div class="boxpanel">
<div class="w3-code htmlHigh notranslate" style="background:none;border: 3px solid #f2f2f2; font-family: &quot;courier new&quot;; margin-bottom: 10px; margin-top: 10px; padding: 10px;">

Isi dengan kode HTML yang sudah di Parse terlebih dahulu 

</div>
</div>

• 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 2 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...

Cara Membuat Syntax Highlighting Pada Blog Versi 2

Please Share

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

Artikel Lainnya Terkait Costumized