Cara Menulis Sintax Highlighter di Blog
Selain mempercantik tampilan baris code di halaman blog kita. Penggunaan syntax highlighter juga agar pembaca lebih mudah memahami bahasa code yang digunakan. Beberapa pertanyaan sebelum kita bahas cara menulis syntax highlighter di blog.
- Ingin mendokumentasikan source code?
- Ingin membagikan catatan-catatan penting code?
- Ingin membantu masalah orang lain dalam coding?
- dan masih banyak lagi.
Ya, dokumentasikan saja tulisanmu lewat blog, Agar orang lain dapat menerima manfaatnya juga. Namun, bagaimana caranya agar tulisan code kita dapat tertulis rapih di blog?
Gunakanlah beberapa plugin yang biasa digunakan dalam penulisan syntax code dalam blog. Disini, saya jelaskan bagaimana caranya menulis syntax code pada CMS wordpress.
Langkah – langkahnya:
- Masuk ke Plugins, Tambah baru
- Cari plugin code syntax block
- Install dan Aktifkan
- Atau Install plugin Code Syntax Block, cari di google atau di wordpress plugin atau disini.
- Tambah Post baru, tambah element code
- Kemudian, pilih bahasa pemrograman yang sesuai
Berikut contoh penulisan code yang menggunakan plugin code syntax block. Pada code dibawah menggunakan bahasa pemrograman PHP
<?php
// -------------------------------------------------------------------------
// Konfigurasi database dalam file ini menggantikan konfigurasi di file asli
// SID di donjo-app/config/database.php.
//
// Letakkan username, password dan database sebetulnya di file ini.
// File ini JANGAN di-commit ke GIT. TAMBAHKAN di .gitignore
// -------------------------------------------------------------------------
// Data Konfigurasi MySQL yang disesuaikan
$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'your_username';
$db['default']['password'] = 'your_password';
$db['default']['database'] = 'your_database';
?>Dibawah ini menggunakan bahasa pemrograman Javascript
Baca juga:
var scripts = document.getElementsByTagName('script');
var last_script = scripts[scripts.length - 1];
var file_ini = last_script.src;
// Harus mengetahui lokasi & nama file script ini
var base_url = file_ini.replace('assets/js/script.js','');
$( window ).on( "load", function() {
// Scroll ke menu aktif perlu dilakukan di onload sesudah semua loading halaman selesai
// Tidak bisa di document.ready
// preparing var for scroll via query selector
var activated_menu = $('li.treeview.active.menu-open')[0];
// autscroll to activated menu/sub menu
if (activated_menu){
activated_menu.scrollIntoView({behavior: 'smooth'});
}
});Dan masih banyak bahasa pemrograman lainnya. Mudah bukan?
