Blogu Jekyll’a taşıdıktan sonra uygun bir tema arayışına girmiştim. Bu uygun tema arayışında işimi en çok gören ise Pixyll teması oldu. Yapımcısı footer’da yer almakta. Neyse malumunuz kod içeren makaleler yazınca o makalelerdeki kodların da renklendirilmesi önemli. Kullandığımız temalara göre renklendirme özellikleri mevcut elbette. Ancak jekyll ile birlikte Route varsayılan olarak geldiği için pek de arayışa geçmeyiz. Fakat benim gibi görselliği de seviyorsanız mutlaka farklı alternatifleri de düşünürsünüz ki bunlardan birisi de Pygments oluyor. Tabi bunu da beğenmiyor olmanız pekala normal karşılanabilir.
Ben özellikle son dönemde en popüler kod renklandiricilerden olan PrismJS kullanmayı uygun gördüm. Bu yazıda ve diğer yazılarda etkisini göreceksiniz. Çok uzatmadan nasıl kurulacağını anlatayım. Şimdi bu işlem 3 adımdan oluşmakta.
İlk Adım: Rouge’un devre dışı bırakılması
İkinci Adım PrismJS’in İndirilmesi
Üçüncü Adım İlgili Kütüphanelerin head ve footer’a eklenmesi
1-) Şimdi öncelikle bize lazım olan şey Rouge’un devre dışı kalması dedik. _config.yml dosyasına geçelim. Burada yapmamız gereken şey öncelikle highlighter: none demeliyiz.
Daha sonra kramdown için alt seçeneklere bazı eklemeler gerçekleştirmeliyiz. Bu işleme göre syntax highlighter disable olmalı. Kısacası ilgili bölümler aşağıdaki gibi olmalı:
highlighter: none
markdown: kramdown
kramdown:
syntax_highlighter_opts:
disable: true
2-) İlk adımı atlattık şimdi geldi ikinci adıma. İkinci adımda PrismJS’yi http://prismjs.com/ adresinden indirelim. Bu indirme ile birlikte iki dosya karşınıza gelecektir.Birisi JS bir diğeri de CSS dosyası.
Ben PrismJS’i özelleştirerek indirmenizi öneriyorum. Syntax highlighter için default tema aslında gayet iyi ama siz dilerseniz farklı temaları da seçebilirsiniz. Blogunuzda hangi dillerde yayın yapıyorsanız (Programlama dilleri) o dilleri seçin öncelikle. Ben hepsini seçmedim ama bazı deneyip bir şeyler aktaracağım dillere dair seçimler gerçekleştirdim.
Dil seçimi tamamlandı. Artık seçmemiz gereken bir diğer şey ise plugin yani eklentiler. Bunlar inanın PrismJS’i daha güzel bir şekilde kullanmanıza da imkan tanıyan eklentiler. Benim önerilerim şunlar:
Line Numbers: Satır numaralarını gösterir.
Autolinker: Kodlarda yer alan yorum satırlarında link varsa tıklanabilir hale getirir
Show Language: Eklenen kodun hangi dilde eklendiğini sağ üst köşede gösterir. Bu yazıdaki YAML örneğinde olduğu gibi
3-) Son adıma geldik. Bu adımda indirilen dosyaları klasörlere atma zamanı. css zaten hazır olduğu için prism.css dosyasını o klasöre atın. Eğer js klasörü yoksa oluşturun ve prism.js dosyasını da o klasöre atın.
Şimdi gelelim son adımlara. Öncelikle head.html dosyasını açalım. Ya da artık header görevini neresi görüyorsa orası. O kısma şu kodu yapıştıralım:
<link rel="stylesheet" href="{{ "/css/prism.css" | prepend: site.baseurl }}">
Not: href içinde süslü parantezler vardır:
{{ "/css/prism.css" | prepend: site.baseurl }}
Bu işlem bittikten sonra da artık son bir işimiz kalıyor. footer.html dosyasını açıp şu kodu yapıştıralım:
<script src="{{ "/js/prism.js" | prepend: site.baseurl }}"></script>
Yine yukarıdaki uyarı aynı bu kısımda da geçerlidir. Dikkate almanızı öneririm. Evet işlemler bu kadar 🙂 Artık PrismJS hazır durumda.