Bunun için bir kaç yol var. En çok tavsiye edilen kodları iç içe
pre ve
code etiketlerinin içine yazmak, < ve > karakterlerini HTML entity olarak belirtmek.
Örnek:
<pre>
<code>
<div>Bu bir div</div>
</code>
</pre>
pre etiketi boşlukların ve satır sonlarının görüntülenmesini sağlar. Ayrıca otomatik olarak monospace yazı tipi (eşit genişlikli harfler) görüntüler.
İkinci bir yol kodları
xmp etiketi içine yazmak.
xmp etiketi kullandığınızda HTML entity kullanmanıza gerek kalmaz.
<xmp>
<div>Bu bir div</div>
</xmp>
Ancak
xmp etiketi eski HTML sürümlerinde tanımlandığından kullanılması
tavsiye edilmez. Yine de yazının yazıldığı tarih itibariyle tüm
tarayıcılarda çalışır
Kod renklendirmesi için ise bir çok yol var. Bu sitede de olduğu gibi
Google Code Prettify kullanabilirsiniz.
Bağlantıdaki
src klasöründe bulunan
prettify.css ve
prettify.js dosyalarını bir klasöre kaydedin ve kullandığınız tüm
pre ya da
xmp etiketinin
class özelliğine
prettyprint değerini atayın, belge yüklendiğinde de
prettyPrint fonksiyonunu çağırın. Kodlar otomatik olarak renklendirilecektir.
Tam HTML Belgesi Örneği:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>HTML İçinde Kod Görüntüleme</title>
<link href="google-code-prettify/prettify.css" rel="stylesheet" />
<script src="google-code-prettify/prettify.js"></script>
</head>
<body>
<xmp class="prettyprint">
<div>1. kod bloğu</div>
</xmp>
<xmp class="prettyprint">
function kare(sayi) {
return sayi * sayi;
}
</xmp>
<script>
document.addEventListener("DOMContentLoaded", function() {
prettyPrint();
});
</script>
</body>
</html>
