Membuat TextArea atau Syntax Highlighter Tanpa Perlu Parse code


Membuat TextArea atau Syntax Highlighter Menarik Dan Tanpa Perlu Parse* code 

Banyak istilah pemerograman misalnya antara syntax dan source code yang keduanya bisa diartikan dengan bahasa pemrograman komputer, yaitu bahasa yang hanya bisa dimengerti oleh komputer yang juga semuanya diterjemaahkan dalam bahsa binari dengan kode 010101010101. tentu sudah familiar sekali bagi kalangan programer.

Kembali ke judul, Sebenarnya ini juga sebagai pengingat bahwa saya pernah mencari tau tentang pembuatan Syntax Highlighter. tutorial ini dikhususkan untuk pengguna blogger, untuk Anda yang menggunakan CMS lain dapat disesuaikan.

Syntax Highlighter merupakan suatu text area yang biasa berisi sript dalam postingan terkait tutorial pemrograman, tentu Syntax Higlighter sangat berguna agar script yang kita menambahkan script pada tulisan agar tidak error dan malah menajdi code hidup dalam tampilan website. kegunaan lainnya tentu dapat merapikan tampilan post yang Anda buat.

Cara Memasang Kode Syntax Highlighter pada Blogger

  1.  Buka Edit HTML pada menu Theme Blogger
  2. Temukan area CSS, biasanya berada di atas kode ]]></b:skin> 
  3. Tambahkan script dibawah ini tepat diatas ]]></b:skin> lalu save theme.



/* ini syntax highlighter badrujaman.com*/
.post-body pre {
  background-color: #4b0572; /* warna background */
  border-left: 15px solid #e0ec1c; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}


Perlu dicatat Anda dapat mengubah warna ataupun ukuran border Syntax Highlighter itu sesuai dengan selera Anda pada bagian yang telah saya tandai.
 /* warna background sesuaikan */
/* variasi border kiri sesuaikan*/
/* warna huruf sesuaikan */
/* ukuran huruf sesuaikan */


Penerapan Kode Syntax Highlighter pada Blogger

Sebelum penerapan pastikan dalam website Anda sudah terpasang Search CDNjs atau jQuery. Jika Anda masih ragu sudah memasang jQuery atau belum maka Klik disini.

Pada penerapannya, Anda hanya perlu menggunakan perintah <pre> dan <code>. Jika Anda sebelumnya belum pernah memakai script pada postingan blog, Anda ikuti petunjuk dibawah ini.

Buka lembar post baru kemudian menulis terlebih dahulu, Jika sudah pada bagian dimana Syntax Highlighter dibutuhkan. Anda harus beralih ke mode penulisan HTML. Menu HTML terletak pada bagian pojok kiri atas toolbar yang berdampingan dengan Compose. Dan lembar kerja Anda akan beralih ke mode source code HTML.

Menu HTML


Paste kode dibawah ini. Lalu, Anda perhatikan Antara <pre><code> dan </pre></code> itu merupakan tempat untuk Anda isi dengan source code yang ingin Anda bagikan. 


<pre><code>
  <!-- Masukkan semua kode CSS, HTML atau Javascript disini -->
</pre></code>


*( Apabila Anda masih menemukan kesulitan saat memasukan script makan silahkan Parse saja script Anda klik disini
Contoh


0 Komentar