Blogger'da Syntax Highlighter Kullanımı

Blogger kullanıcıları eğer programlama, web geliştirme gibi içeriğinde kod barındıran blog yayınları yayınlıyorsa syntax highlighter kullanımı oldukça önemlidir. Syntax highlighter, eklenen kodu farklı renklerde göstermektedir, örneğin, eklenen dile ait anahtar kelimeler mavi renkte gösterilirken, fonksiyon isimleri kırmızı renkte gösterilmektedir.

Kullanacağımız syntax highlighter kütüphanesi highlight.js'dir. Bu kütüphanede oldukça fazla stil desteği bulunmaktadır. Sitenizin renklerine uygun olarak gerekli stili seçebilirsiniz. Peki nasıl kullanılır? İlk olarak Blogger tema kodlarına gerekli kütüphaneleri eklememiz gerek. Bilindiği üzere Blogger'ın dosyalar için bir hosting desteği şu an olmadığı için şu yazıya bakmanızda fayda olabilir. Blogger için GitHub'ı Host Olarak Kullanmak

Gerekli dosyaları highlight.js sitesinden indikten (indirmeyi Get version x.x butonundan indirme sayfasına ulaşarak gerçekleştireceksiniz) sonra yapmanız gereken yukarıda verdiğim bağlantıda anlatıldığı gibi gerekli olan bu dosyaları oraya yüklemektir. Yükleyeceğiniz dosyalar sadece iki tane bunlardan birisi highlight.pack.js dosyası, diğeri ise seçilen stilin .css dosyasıdır. Aşağıdaki kodda href parametresine .css dosyasının adresi ve src parametresine highlight.pack.js dosyasının adresi eklenir.
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
Sonrasında yapılması gereken, tema kodlarında head etiketleri arasında yer alacak şekilde yukarıdaki kodu eklemektir. Temayı kaydettikten sonra artık syntax highlighter kullanılabilir. Kullanımı için yapılması gereken blog yazılarında HTML modunda olmak şartıyla aşağıdaki kodu ekleyerek arasında eklemek istediğiniz herhangi bir programlama dili ile yazılmış kodu ekleyebilirsiniz, Örneğin class parametresinde eklenen kodun HTML olduğunu belirterek [...] aralığına html kodu eklenebilir:
<pre><code class="html">...</code></pre>
Umarım yardımcı olmuştur, kolay gelsin!

Hiç yorum yok:

Yorum Gönderme