Menampilkan Syntax Kode di Area Posting - Mungkin sebagian konco sinahu ada yang masih bingung dan penasaran ketika melihat postingan yang memuat syntax kode-kode. Padahal seharusnya yang muncul di browser kan hasil dari perintah kode-kode tersebut.
Sebenarnya ada banyak cara untuk menampilkan syntax kode apa adanya di area posting ini, tapi di sini saya akan memberikan cara yang paling dasar. Baik itu bentuknya kode html, javascript, css, dan lain sebagainya.
Caranya yaitu dengan menggunakan tag <code>. Contohnya seperti di bawah ini :
Akan tetapi, jika hanya menggunakan tag <code> maka semua spasi atau ruang kosong akan hilang. Sehingga output dari syntax kode tersebut hasilnya menjadi seperti ini :
Nah, untuk menampilkan syntax kode apa adanya beserta spasi dan ruang kosongnya maka harus ditambah tag <pre>. Sehingga menjadi seperti ini :
Hasilnya akan terlihat seperti di bawah ini :
Sebenarnya ada banyak cara untuk menampilkan syntax kode apa adanya di area posting ini, tapi di sini saya akan memberikan cara yang paling dasar. Baik itu bentuknya kode html, javascript, css, dan lain sebagainya.
Caranya yaitu dengan menggunakan tag <code>. Contohnya seperti di bawah ini :
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<code>
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
</code>
</body>
</html>
Akan tetapi, jika hanya menggunakan tag <code> maka semua spasi atau ruang kosong akan hilang. Sehingga output dari syntax kode tersebut hasilnya menjadi seperti ini :
var person = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
}
Nah, untuk menampilkan syntax kode apa adanya beserta spasi dan ruang kosongnya maka harus ditambah tag <pre>. Sehingga menjadi seperti ini :
<!DOCTYPE html>
<html>
<body style="font-size:16px">
<code>
<pre>
var person = {
   firstName:"John",
   lastName:"Doe",
   age:50,
   eyeColor:"blue"
}
</pre>
</code>
</body>
</html>
Hasilnya akan terlihat seperti di bawah ini :
var person = {
   firstName:"John",
   lastName:"Doe",
   age:50,
   eyeColor:"blue"
}
Demikian postingan mengenai cara Menampilkan syntax kode di area posting yang bisa saya share kali ini. Untuk pengembangan model tampilan syntax kode di area posting yang lebih menarik akan kita bahas di lain waktu. Karena agak ribet yang itu. hehe.. 
0 Komentar untuk "Menampilkan Syntax Kode di Area Posting"