SyntaxHighlighterJS ile Kodları Renklendirmek

  • 14.03.2016
  • M.Tayyip Yetiş
  • Eklenti ve Kütüphaneler

syntax highlighterMerhaba arkadaşlar bu makalede genelde blog sitelerinde kullanılma ihtiyacı hissedilen bir bir javascript kütüphanesinden bahsedeceğim ve ufak bir örnek yapacağım. Yazılım alanındaki blog sitelerinde olmazsa olmazlardan bir tanesi kodların renkli yani derleyicilerdeki gibi anlaşılır ve alışılmış şekilde gösterilmesidir. Ben de dahil çoğu kişi yeni bir yazılım konusunu öğrenmek için ziyaret ettiği blog sitesindeki kodların tek renkli düz text olarak yazıldığını görünce siteyi terk ediyor çünkü yazılanı anlamak kodları anlamaktan daha zor hale geliyor.

Peki böyle bir durumda ne yapabiliriz ? piyasada farklı özelliklerde çeşitli kod renklendiriciler bulunmakta ama benim kişisel tercihim blogengine.net'te de kullanılan SyntaxHighlighter.js eklentisi. Tercih sebebim ise Visual Studio'ya en yakın renk paletlerini kullanması, onlarca farklı tema seçeneğinin olması, sAutoLoader.js eklentisi ile yazılan kod dilinin ihtiyaç duyduğu js modulünü otomatik yüklemesi vs. gibi sebepler var. Şimdi kullanım örneğine geçebiliriz. Elbette JQuery kütüphanesinin elinizde hazır bulunduğunu varsayıyorum.

1- Öncelikle bu linkten SyntaxHighlighter-2016-03-14.zip (76,52 kb) javascript kütüphanesini indirin ardından temiz bir Html sayfası açın. sayfanın head tagları arasında aşağıdaki sıralama ile belirtilen  js ve css dosyalarını ekleyin. 

<head>
    <title></title>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="Scripts/SyntaxHighlighter/scripts/shCore.js"></script>
    <script src="Scripts/SyntaxHighlighter/scripts/shAutoloader.js"></script>
    <link href="Scripts/SyntaxHighlighter/styles/shCore.css" rel="stylesheet" />
    <link href="Scripts/SyntaxHighlighter/styles/shThemeDefault.css" rel="stylesheet" />
</head>

shCore.js içim eklentimizin çekirdek modülü diyebiliriz temel işlemler için jquery'den hemen sonra bunun tanıtmalısınız. ardından opsiyonel olarak shAutoloader.js tanıtmalısınız. Neden opsiyonel diyorum ? çünkü bu modül yukarıda bahsettiğim gibi dil bazlı modülleri otomatik entegre eder. örneğin C# dili ile yazdığınız kodun renklenmesi için sayfaya C# için gerekli js modülünü eklemelisiniz. aynı sayfada bir kaö farklı dilde kod yazacağınızı düşündüğümüzde bu zahmetli bir iş olur. bu modül ise bu işi kolaylaştırıp tüm diller için önceden kendisine tanıttığınız modülleri ihtiyaç duyulduğunda otomatik entegre eder bu ayrıca gereksiz js yüklenmesini engelleyerek performans kaybını engeller.

2-  Sayfa içerisinde yazacağınız kodları aşağıdaki gibi pre tagları arasında yazmalısınız

<pre class="brush:xml;auto-links:false;toolbar:false" contenteditable="false">

<b> Merhaba, Dünya </b>

</pre>

class içerisindeki brush parametresi dil seçimi için kullanılır örneğin; C# > csharp , VB.Net > vb,  HTML > xml, SQL > sql

3- Yukarıdaki işlem kodların renklenmesi için yeterli değil. body kısmının en altında document ready olayının içinde aşağıki gibi renklendirme komutunun başlatılması gerekir.

<script>     
  $(document).ready(function () {
    SyntaxHighlighter.all();
  });
</script>

4- Şimdi Autoloader işlemini yapalım SyntaxHighlighter.all() komutundan önce aşağıdaki tanıtımın yapılması gerekir.

<script>     
    $(document).ready(function () {
       var root = 'scripts/syntaxhighlighter/scripts/';
       SyntaxHighlighter.autoloader(
          'applescript            ' + root + 'shBrushAppleScript.js',
          'actionscript3 as3      ' + root + 'shBrushAS3.js',
          'bash shell             ' + root + 'shBrushBash.js',
          'coldfusion cf          ' + root + 'shBrushColdFusion.js',
          'cpp c                  ' + root + 'shBrushCpp.js',
          'c# c-sharp csharp      ' + root + 'shBrushCSharp.js',
          'css                    ' + root + 'shBrushCss.js',
          'delphi pascal          ' + root + 'shBrushDelphi.js',
          'diff patch pas         ' + root + 'shBrushDiff.js',
          'erl erlang             ' + root + 'shBrushErlang.js',
          'groovy                 ' + root + 'shBrushGroovy.js',
          'haxe                   ' + root + 'shBrushHaxe.js',
          'java                   ' + root + 'shBrushJava.js',
          'jfx javafx             ' + root + 'shBrushJavaFX.js',
          'js jscript javascript  ' + root + 'shBrushJScript.js',
          'perl pl                ' + root + 'shBrushPerl.js',
          'php                    ' + root + 'shBrushPhp.js',
          'text plain             ' + root + 'shBrushPlain.js',
          'ps powershell          ' + root + 'shBrushPowerShell.js',
          'py python              ' + root + 'shBrushPython.js',
          'ruby rails ror rb      ' + root + 'shBrushRuby.js',
          'sass scss              ' + root + 'shBrushSass.js',
          'scala                  ' + root + 'shBrushScala.js',
          'sql                    ' + root + 'shBrushSql.js',
          'vb vbnet               ' + root + 'shBrushVb.js',
          'xml xhtml xslt html    ' + root + 'shBrushXml.js'
        );
       SyntaxHighlighter.all();
});
</script>

Burada root değişkeni klasör yolunun kolay kontrol edilmesi için tanımlanmıştır. eklenti yolunu doğru bir şekilde burada belirmelisiniz ki gerekli tüm modüller otomatik tanıtılabilsin.

Bu işlemleri doğru bir şekilde yaptığınızda kodlarınız renklenmiş olacaktır. SyntaxHighlighterJS eklentisini Github'ta bulabilirsiniz fakat ben yeni güncellemeler olabilir ve buradaki komutlar düzgün çalışmaz diye kendi kullandığım kütüphaneyi link olarak verdim.

Umarım faydalı olmuştur. gürüşmek üzere.

Mustafa Tayyip YETİŞ
Yazılım Geliştirme Uzmanı

Yorum Yap