Blogunuzun içeriği gereği yazılarınızda çeşitli kodları göstermek durumunda kalabilirsiniz. Ancak zaman zaman kod gösterimi içinden çıkılmaz bir hal alabiliyor. Yazınıza sadece kullanıcılarınıza göstermek için eklediğiniz kodu blog altyapınız sitenizin bir parçası gibi algılayabilir, kodu göstermenize engel olabilir, hatta sitenizin görünümünü bile bozabilir. Bu sebeple kodları doğru biçimde göstermek için çeşitli araçlardan faydalanacağız.

Bildiğiniz gibi html kodlarında bulunan çeşitli simgelerin harf karşılıkları vardır. Öreneğin kodlarda sıkça kullandığımız <, >, • gibi simgeler sırasıyla < > • şeklinde harf ve simgeler ile karşılanabilir. Bu araçlar yazdığınız kodların yanlış görünmesini engellemek için az önceki örnekte bulunan simgeleri harflendirmektedir. Böylelikle yazılarınızda kod göstermi yapabileceksiniz.

• Postable
• Centricle - Html Entities
• WordPress Encoder Widget
• SimpleCode
• Lenon Html Enconder

Yukarıdaki araçlara düzenlemek istediğiniz kodu yazarak/yapıştırarak yazınıza ekleyeceğiniz kodu elde edebilirsiniz.

Kod göstermek için bir diğer yol da kodu textarea etiketleri arasında yazmak.

Burada textarea kullanarak kodların nasıl göründüğünü anlayabilirsiniz.

Bunun için kullanmanız gereken kod;

<textarea cols=”60″ name=”text” rows=”10″>Kodu buraya ekleyin</textarea>

Buradaki “60″ sayısı sütün oranını, “10″ sayısı da satır sayısını belirtmektedir. Kodunuzun uzunluğuna göre bu rakamları arttırıp, azaltabilirsiniz.

Aynı şekilde kodları alıntı bir sözmüş gibi de gösterebilirsiniz. Yalnız css dosyanızda konu ile ilgili birkaç ayar yapmanız gerekebilir. Örnek olması bakımından basit bir alıntı kodu:

blockquote { color: #6b6b6b; font-style:italic padding:7px;}

Burada siyah ve dik yazdığınızı düşünerek alıntı kodunu siyahtan daha açık bir renkle ve eğik göstermiş olduk. Yazıdan bağımsız olması için de kod bölümene biraz girinti verdik. Yazılarınızda bu özelliği de <blockquote>Kodu ekleyeceğiniz yer</blockquote> şeklinde kullanabilirsiniz.

Alıntı için yaptığımız css işlemini eğer blog altyapınız destekliyorsa sadece kodlar için de kullanabilirsiniz.

code { border:1px dashed #444; padding:5px; }

Css kodlarınıza benzeri şekilde ekleyeceğiniz kod <code>Kodlar</code> örneğinde belirlediğiniz görünümde kodlar yazmanızı sağlayacaktır.

Son olarak Code Formatter aracını kullanarak yazacağınız kodların nasıl görüneceğini kolay bir biçimde belirleyebilir, kodlarınızı gösterirken güzel bir görünüm elde edebilirsiniz.