Blogger Kod Renklendirme

21 Tem 2008 | Etiketler:Blogger, code highlighter, İnternet, JavaScript, syntax, SyntaxHighlighter

blogger logo

Blogda daha farklı konulara (PHP, MySQL vb.) değinmeyi düşünürken öncelikli konunun Blogger olması sizlere ilginç gelebilir. Bildiğiniz gibi içerisinde kod barındıran yazılarda, kodları düz metin gibi yazmak ziyaretçilere anlaşılır gelmeyecektir. Bu sebepten ötürü bu konuda biraz araştırma yaptım ve eburhan’ın şuradaki yazısını buldum. Benimle aynı sıkıntıyı yaşayan veya yaşayacak olanlara faydalı bir yazı olacağını umuyorum.

Kısa bir girizgahtan sonra gelelim asıl meseleye. Öncelikle eburhan’ın da yazısında belirttiği gibi kod renklendirmede kullanabileceğiniz çeşitli scriptler mevcut. Biz bu scriptlerden SyntaxHighlighter‘ı kullanacağız.

Öncelikle şu adresten dosyamızı indiriyoruz. Bizim işimize yarayacak olanlar şunlar.

Scripts -> clipboard.swf
Scripts -> shCore.js
Styles -> SyntaxHighlighter.css

Bunların haricinde hangi dilde kod renklendirme yapmak istiyorsak o dilin JavaScript dosyasını Script klasöründen buluyoruz. Örneğimizde HTML ve PHP dillerini kullanacağız.

Blogger’ın barındırma hizmeti olmadığı için kullanabileceğimiz en iyi barındırma servisi Google Pages. Dosyalarımızı Google Pages veya başka bir servise yükledikten sonra Blogger Kontrol Panelinden Yerleşim -> HTML’yi Düzenle sekmesine geliyoruz. Bir sorun oluşmaması için kullandığınız şablonu yedeklemenizi öneririm. Şablonda

</body>

etiketinin hemen üzerine aşağıdaki kodları yapıştırıyoruz.

<link href='http://username.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://username.googlepages.com/shCore.js' type='text/javascript'/>
 
<script src='http://username.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://username.googlepages.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://username.googlepages.com/shBrushXml.js' type='text/javascript'/>
 
<script class='javascript'>
  dp.SyntaxHighlighter.ClipboardSwf = "http://username.googlepages.com/clipboard.swf";
  dp.SyntaxHighlighter.BloggerMode();
  dp.SyntaxHighlighter.HighlightAll("code");
</script>

Kodlardaki username‘i kendi kullanıcı adınızı yazarak düzeltmelisiniz. Hepsi bu kadar. Kullanmak için ise yazılarınızı yazarken HTML’yi Düzenle sekmesine gelip kodlarımızı şu şekilde giriyoruz.

HTML Kod Renklendirmesi İçin Örnek: