Web sitenizde kod parçaciklari yayinliyorsaniz ve bu kod parçaciklarinin düzgün ve göze hitab eden bir sekilde görüntülenmesini istiyorsaniz  Alex Gorbatchev in yaptigi SyntaxHighlighter bu noktada iyi bir çözüm sunuyor. Burada SyntaxHighlighter kullanimini kisa ve hizli bir sekilde kullanim örnegini bulabilirsiniz.

Baslarken, sonuçta varacagimiz yer olan herhangi bir kod parçaciginin web sitemizde nasil göründügünü görelim;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //do something
    }
}

Yukaridaki görüntüyü sayfada verebilmek için gerekli islemler;

  1. SyntaxHighlighter için gerekli olan script dosyalarinin sayfaya eklenmesi (jquery dahil )
  2. SyntaxHighlighter için gerekli olan css dosyalarinin sayfaya eklenmesi (iconlar dahil )
  3. Sayfaya tetikleyici script kodunun eklenmesi
  4. Kod içerigi yazilirken <pre class="brush:csharp" > ... some code </pre> html taglarinin yazilmasi.
     

Sayfanin head tagi söyle görünür;

<link type="text/css" rel="stylesheet" href="CSS/shCore.css"/>
<link type="text/css" rel="stylesheet" href="CSS/shThemeDefault.css"/>
<script type="text/javascript" src="scripts/jquery-1.4.1.js"></script>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushCSharp.js"></script>
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="scripts/shBrushSql.js"></script>
<script type="text/javascript" src="scripts/shBrushXml.js"></script>

<script type="text/javascript">
    SyntaxHighlighter.config.clipboardSwf = 'scripts/clipboard.swf';
    SyntaxHighlighter.all();
</script>

Sayfanin Body tagi içerisinde örnek kod parçacigi gösterirken

<pre class="brush: csharp;">
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack) {
        //do something
    }
}
</pre>

Yukarida bahsi geçen tüm script ve css dosyalarini Alex Gorbatchev 'in sitesinde bulabilirsiniz.

Saglicakla kalin :)

If you like this, follow my RSS channel!