SyntaxHighlighter Blogger'a nasıl eklenir ve kullanılır?

Eğer yazılarınız içerisinde HTML, CSS, JavaScript gibi program ve scriptlerden alıntılar yapıyor ya da kendi kodlarınızı yayınlıyorsanız SyntaxHighlighter eklentisi, işinize çok yarayacak bir eklentidir. Bu eklenti ile birlikte, yayınladığınız kodlar, renklendirilerek estetik bir görünüme kavuşur. Ayrıca kodları kullanmak isteyenler kopyala / yapıştır işlemini daha hızlı ve daha doğru bir şekilde yapabilirler.

Kurulum

Eklentiyi temamıza uygulamak için yapmamız gerekenler aşağıdaki şekildedir.

• Blogger Kumanda Paneli > Şablon > HTML’yi Düzenle > Devam Et > komutlarını uyguluyoruz.
• CTRL+F tuş kombinasyonu yardımıyla </head> kodunu bulup hemen üzerine aşağıdaki kodları ekliyoruz.

  <!-- SyntaxHighlighter START -->
  <link href='https://dl.dropbox.com/s/l8necwge1f04ok0/shCore.css' rel='stylesheet' type='text/css'/>
  <link href='https://dl.dropbox.com/s/sgf49uy5p6dae62/shThemeDefault.css' rel='stylesheet' type='text/css'/>
  <script src='https://dl.dropbox.com/s/q3oxn6ae4ggjakp/shCore.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/7qaegk30zq7tfbq/shBrushCpp.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/nom86ej7trbctsh/shBrushCSharp.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/mvhpm5ka4my8unm/shBrushCss.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/ng29s36ua67deg9/shBrushJava.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/k31ut3ahkqzwb37/shBrushJScript.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/lsfxzfzs4mq9inv/shBrushPhp.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/pzcvzjngfjfky1f/shBrushPython.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/fijcpyzb5j17rjh/shBrushRuby.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/j4dk92ykp07kabm/shBrushSql.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/lhbqyf53b692jrc/shBrushVb.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/uynou202ua5bm04/shBrushXml.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/ji9auf6z43wak1p/shBrushPerl.js' type='text/javascript'/>
  <script src='https://dl.dropbox.com/s/9otnpg6ur3ca13c/shBrushBash.js' type='text/javascript'/>
  <script language='javascript'> 
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.config.clipboardSwf = &#39;https://dl.dropbox.com/s/hspyweibkiaem1z/clipboard.swf&#39;;
  SyntaxHighlighter.all();
  </script>
  <!-- SyntaxHighlighter END -->
  

Eklentinin blogumuza eklenmesi işlemi bu kadar. Ancak kullanımında dikkat edilmesi gereken bazı hususlar var.

Kullanım

Örneğin; eğer yazımızın içinde HTML kodlarını yayınlayacaksak, yayınlayacağımız kodları buradaki Raw HTML to Escaped HTML çevirici ¹ program yardımıyla Escaped HTML hale getiriyoruz. Daha sonra bu kodu aşağıda tanımlanan kod formatlarından uygun olanın içine yerleştiriyoruz.

<pre class="brush:html">
HTML kodlarımız buraya yazılacak.
</pre>

Aynı şekilde eğer CSS kodları yayınlayacaksak, yukarıda bahsettiğimiz kod çevirme işleminden sonra, aşağıdaki yapıyı kullanmamız gerekir.

<pre class="brush:css">
CSS kodlarımız buraya yazılacak.
</pre>

JavaScript kodları için kullanılacak yapı ise aşağıdaki şekildedir.

<pre class="brush:js">
JavaScript kodlarımız buraya yazılacak.
</pre>

Yazıldığı dilin algılanıp, renklendirilebildiği brushların listesi aşağıdadır.

actionscript3, bash, shell, c-sharp, csharp, cpp, c, css, delphi, pas, pascal, diff, patch, groovy, js, jscript, javascript, java, jfx, javafx, perl, pl, php, plain, text, ps, powershell, py, python, rails, ror, ruby, scala, sql, vb, vbnet, xml, xhtml, xslt, html, xhtml

SyntaxHighlighter ile kod yayınlamak biraz zahmetli olsa da, yayınlanmış olan kodları kullanmak oldukça kolaydır. Yapmanız gereken tek şey, kodların üzerine geldiğimizde sağ üstte ortaya çıkan ve sırasıyla; viev source (kaynağı göster), copy to clipboard (panoya kopyala), print (yazdır) ve help (yardım) komutlarından, copy to clipboard komutunu kullanmaktır.

Dip Not :

¹ : Yazılarımız üzerinden kod yayınlamada her zaman kod değişkenlerinin, istenmeyen kod ya da tehlikeli istemci-taraflı(client-side) kod olarak çıktı vermesi riski vardır. Bunun sonucunda dinamik içeriğin çıktısı olan HTML bozulabilir ya da kötü niyetli bir kullanıcı Cross Site Scripting (XSS) atağı deneyebilir. Bu problemin çözümü çıktıyı temizlemektir (output escaping). Çıktıyı temizleme işlemi sonrasında yazımız zararsız bir şekilde ekrana basılacak ve kodlar içinde yer alan etiketler harfi harfine gözükecektir.