Javascript tabanlı kod renklendirme (Syntax Highlighter)

Daha önceki sitemde verdiğim kodları renklendirmek için fck düzenleyicisine eklenen bir geshi eklentisi kullanmıştım. Ancak geshi renklendirme (syntax highlighting) işlemini sunucu tarafında yaptığı için istemci tarafında çalışacak javascript tabanlı bir araç aramaya başladım. Sonunda şunu buldum:

http://alexgorbatchev.com/wiki/SyntaxHighlighter

Eski kodların bazılarını bu sisteme dönüştürdüm. Kalanları da zamanım oldukça sırayla değiştirmeyi düşünüyorum. Blogger sunucuya dosya yüklemeye izin vermediği için gereken dosyaları eklentinin kendi sitesinden kullanıyorum. Eğer siz de bu sistemi kullanmak istiyorsanız blog şablonunuz içine head imleri arasına aşağıdaki gibi bir ekleme yaparak bu aracı uygulayabilirsiniz. Eğer dosyaları kendi sunucunuzda barındıracaksanız adres değerlerini sitenize göre değiştirmelisiniz.
[html]
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.0.296/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.0.296/scripts/shBrushSql.js' type='text/javascript'/>
[/html]
[html]<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>
[/html]
Bu araç çok sayıda programlama dilinde yazılmış kaynak kod için renklendirme yapabiliyor. Ben sadece kullanma ihtimalim olan bazı diller için gerekli dosyaları dahil ettim. Blogger için kullanılacaksa benim yaptığım gibi bloggerMode ayarının etkinleştirilmesi gerekiyor. Bu aracın kullanımı için kaynak kodu pre imleri içine yazıyoruz ve örneğin javascript renklendirmesi için pre imine class="brush: js" şeklinde sınıf veriyoruz:
[html]
<pre class="brush: js">
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</pre>
[/html]
Bu kod sonuçta aşağıdaki gibi görünür:
[js]
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
[/js]