Google Blogger'a Syntax Highlight Özelliğinin Eklenmesi

Google'ın blog hizmetini daha bugün kullanmaya başladım. Blog girdilerimin içerisinde kod örneklerini sıklıkla kullanacağım için "syntax highlight" özelliğinin gerekli olabileceğini düşündüm. Bu entry'nin başlığına iliştirilmiş linkten faydalanarak bunu gerçekleştirmek mümkün oluyor.

1. http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, linkindeki css bilgisini kopyalıyoruz

2. Kopyalanan bu bilgiyi blog yerleşim ayarlarındaki HTML düzenleme kısmında, <b:skin><!--[CDATA[ kısmından sonra ve ]]--></b:skin> kısmından önceki alana yapıştırıyoruz.

3. </head> etiketinden önce aşağıdaki kodları yerleştiriyoruz:

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

Şimdi burada dikkat edilmesi gereken kullanılacak olan dillerde bir optimizasyon yapmak. Hiç kullanmayı düşünmediğimiz dillere ait satırları silmek sayfa yüklenirken daha hızlı açılmasını sağlıyor.

4. </body> etiketinden önce de aşağıdaki satırları yerleştiriyoruz:

5.Ardından şablonu kaydediyoruz.

6.Blogumuzu yazarken highlight etmek istediğimiz bir kod olduğunda ise blog girdisini yaptığımız editörde html düzenleme sekmesine girerek şu satırları ekliyoruz. Diyelim ki bir c++ kodu ekleyeceğiz;

...Yazmak istediğiniz kod betiği bu alana girilecek...

7.Bir ince detay da < karakteri ile ilgili. HTML giriş yaparken bu karakteri &lt; ile yazmamız gerekiyor.

8.Kolay gelsin.