Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.
0

HTML belgesi içinde kod görüntüleme

Proje olarak HTML dersleri sitesi hazırlıyorum.

HTML belgesi içinde nasıl kod görüntüleyebilirim? Kod renklendirmesi yapan bir örnek verebilir misiniz?

1 Cevap

0
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>
      &lt;div&gt;Bu bir div&lt;/div&gt;
   </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>


Cevaplayan: 05.03.18 19:09
cevapsitesi
102,034p 15ü