Blogger'da Metin İçerisindeki Kodlar Nasıl Renklendirilir? (SyntaxHighlighter)

HTML derslerine giriş yaptığım bir önceki yazımda örnek verdiğim HTML kodlarını bir kutu içerisinde renklendirerek kullanmıştım. Bu Blogger tarafından varsayılan bir özellik değildir. Fakat kodlamayla ilgili bloglar ve web siteleri için vazgeçilmez bir eklentidir. Blogger'da yazılarınızın içerisindeki kodları nasıl renklendireceğiniz hakkında bilgi almak için aşağıdaki anlatımdan faydalanabilirsiniz.

Ne yapmaya çalışıyoruz?

Öncelikle yapacağımız şey sonucunda ne değişeceğini göstereyim. Normalde Blogger'daki yazılarınıza kod eklerseniz sadece yazı stili değişecek ama kod sayfada düz bir şekilde gözükecektir. Birazdan kullanacağımız eklenti sayesinde de, Blogger altyapılı blogunuzda kodlarınız artık renklendirilmiş bir biçimde gözükecektir. Bu şekilde hem göze hoş gelecek hem de daha anlaşılır olacak. Örnek:
Blogunuza eklediğiniz kodların aynen yukarıda gözüktüğü gibi olmasını istiyorsanız okumaya devam edin.

Metin içerisindeki kodlar nasıl renklendirilir?

Öncelikle Blogger'a giriş yapın ve blogunuzun yönetim paneline gelin.
Sol taraftaki "Şablon" butonuna tıklayın.
Açılan sayfada öncelikle "Yedekle / Geri Yükle" butonunu kullanarak, blog şablonunuzun bir yedeğini indiriniz. Bu şekilde bir hata durumunda yedeği tekrar yükleyerek her şeyi eski haline getirebilirsiniz.
Daha sonra aynı sayfadaki "HTML'yi Düzenle" butonuna tıklayın.
Açılan kod sayfasında kodların bulunduğu kısma tıkladıktan sonra "Ctrl + F" tuşlarıyla </head> kısmını aratın.
Bulduğunuz </head> etiketinin hemen üzerine aşağıda vereceğim kodları yapıştırın. Şablonu önizledikten sonra, bir sorun yoksa kaydedebilirsiniz.

Kullanılacak kod:

Henüz bitmedi

Yukarıdaki kısım yapacağımız işin altyapısını oluşturmaktı. Şimdi uygulamada ne yapacağınızı anlatayım. Metin içerisine bir kod ekleyeceğiniz zaman kodlarınızı şu etiketlerin arasına eklemelisiniz:

Buradaki "brush:html" kısmındaki "hmtl"yi kullanacağınız kodun ismiyle değiştirmeniz gerekiyor. Mesela CSS için "css" veya PHP için "php" yazabilirsiniz. Fakat "brush:" kısmında sonra bunu eklemeyi gözden kaçırmayın.

Çok önemli bir nokta

Aslında bu konu birçok sitede de anlatılmış. Ben de başka bir siteden yararlanarak bu bloga ekledim. Fakat böyle bir yazı yazma gereği duymamın sebebi, diğer yerlerde bir şeyin eksik anlatılmasıdır.

Şöyle açıklayayım yukarıda, ekleyeceğiniz kodları şu etiketlerin arasına eklemeniz gerektiğini söylemiştim:

Maalesef bu durum bununla bitmiyor. Eğer bu etiketlerin arasına ekleyeceğiniz kodların içerisinde yine aynı şekilde <script> etiketleri bulunuyorsa, bu durumda Blogger'ın kafası karışıyor ve eklemek istediğiniz kodların bir kısmını göstermeyebiliyor. Bunu engellemek için içerisinde <script> etiketi bulunan kodlarınızı şu iki etiket arasında kullanın:
Ne demek istediğimi anlamışsınızdır. Aynı durum tam tersi için de geçerlidir. Yani içerisinde <pre> etiketleri olan bir kodunuz varsa bunu da şu etiketler içerisinde kullanmanız gerekecektir:

Diğer yerlerde aynı anlatım olmasına rağmen bu konu es geçildiği için, böyle bir yazı yazmak istedim. Yardımcı olduysa ne mutlu bana...

Son sözler

Programlama dilleri derslerinin yanında buna benzer anlatımlar ve ipuçlarından da haberdar olmak için blogu takip edebilirsiniz. Ayrıca konuyla ilgili sorunuz varsa yorum kısmında yazabilirsiniz.

Kolay gelsin...