3 Temmuz 2012 Salı

Syantax Highlighter Blogger


Blogger alt yapısı kullanan bloglarımızda kod paylaşmak her zaman zor olmuştur. Kısacık bir kod eklemek için bile uzun pre ve code kodlarıyla, çeşitli css kodlarıyla güzelleştirmeye veya farklılaştırıp paylaşmaya çalışıyoruz. Fakat bu tip kodlar her ne kadar işimizi görmüş olsa da uzun zaman kayıplarına, yazı içerisindeki kalabalıklığa ve görüntü kirliliğine neden olmakta. Kısa araştırma sonucu bulduğum ve blogumda kullanmaya başladığım SyntaxHighlighter adında bir kod eklentisi bulunmakta. Bu eklenti aslında sadece blogger için değil diğer hazır web sistemleri için de kullanılabilir.
SyntaxHighlighter eklentisini geliştiren ve kullanıma sunan site alexgorbatchev.com. Bu eklenti ile birçok programlama diline ait kodları paylaşmamız oldukça kolay. Eklentiyi ister kendi sitesinden indirip sitenizin ftp'sine atarak aşağıdaki şeikilde css ve js dosyalarını çağırarak kullanabilirsiniz ya da diğer kod depolama (http://code.google.com) sitelerini kullanabilirsiniz. Aşağıdaki css ve js dosyalarını <head> etiketinden hemen sonra yapıştırınız.

Tasarım > HTML'yi Düzenle adımlarını uygulayıp Widget Şablonlarını Genişlet işaretliyoruz, şimdi kod yerleştirmeye başlıyoruz, aşağıdaki kodu bulalım. 

<head>

<link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shLegacy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJava.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.strings.alert = &quot;Bu bir uyarıdır!&quot;;
SyntaxHighlighter.config.bloggerMode=true;
SyntaxHighlighter.all();
</script>

Başlıca Kullanılabilecek Kod Tipleri
Xhtml, Xml, Html, Css, Javascript, Php, Sql, Java

Yazılarda Nasıl Kullanılır ?
Alttaki brush: js yazan kısmı kullanacağınız kod türüne göre değiştiriniz. Örneğin xml, xhtml ve html kullanmak için js'yi xml yapmalısınız. 


<pre class="brush: js">...</pre>

Hiç yorum yok:

Yorum Gönder