Jekyll’a yeni başlayan biri için, kod bloklarını görüntülemek problemli bir iş olabilir. En azından benim için epey problemli oldu. Bu yazıda, karşılaşabileceğiniz problemlere karşı birkaç ipucu vermeye çalışacağım.
Olası Problem 1: Code Block vs Truncate
Eğer, yazılar kod bloğu içeriyorsa ve anasayfada postları yayınlamak için truncate fonksiyonunu kullanıyorsanız anasayfada herşeyin birbirine girmesi kaçınılmaz. Buna karşı, en azından benim bildiğim güzel bir çözüm yok. Ya truncate kullanmayacağız ya da bir şekilde post’un kod bloğu içerip içermediği kontrol edip ona göre davranması için dinamik bir yapı oluşturacağız. Stackoverflow’da (linki tekrar bulamadım) gördüğüm bir çözümü aşağıya aktarıyorum.
- Post’un eğer tamamı yerine bir kısmının görülmesini istiyorsak o post içinde ilgili yere
<!--break-->yazıyoruz. - Anasayfada tüm içeriği göstermek yerine bu anahtar kelimeye kadar olan kısmı gösteriyoruz ve “devamını oku” bağlantısı ekliyoruz.
{{ post.content | split:'<!--break-->' | first }}
{% if post.content contains '<!--break-->' %}
<a href="{{ post.url }}">devamını oku</a>
{% endif %}
Çok iyi bir çözüm değil, çünkü yazarken bir yerde durup konu ile alakasız bir sözcük yazmanız gerekiyor. Daha iyi bir çözümünüz varsa yorum yazabilirsiniz.
Olası Problem 2: Kod Bloğunu Tanımlamak
İlk seçenek, {% highlight language %} (“language” yerine ilgili dil gelecek, highlight python, highlight csharp gibi) şeklinde liquid kodu ile tanımlamak ki çok kullanışlı olmayacak ve yazma şevkinizi kıracaktır. Çirkin çünkü.
İkinci seçenek ise, 3 tane grave accent ile Github tarzı fenced blocklar kullanmak. TR-Q klavyede AltGR + Virgül ile elde edebilirsiniz. Aşağıdaki satırları _config.yml dosyanıza ekleyerek, “input: GFM” satırı ile Github Flavored Markdown kullanacağımızı belirtiyoruz.
markdown: kramdown
kramdown:
input: GFM
syntax_highlighter: rouge
Daha fazla bilgi için: Github-Help, Rouge
Olası Problem 3: Farklı Renkleri Ayarlamak
Yukarıdaki satırlarda geçen “Rouge” ise jekyll’ın default syntax highlighter’ı ve Github sayfaları da Rouge kullanıyor. Tabii ki css dosyanızda “.highlight” classı ile ilgil bir şeyler yazmalı.
- Pygments ile oluşturulmuş temaları kullanmak istiyorsanız richleland reposunda hazırı var.
- Bunun dışında github’da google’da arayabilir, kendiniz renklerle oynayabilirsiniz.
Olası Problem 4: Liquid Kodunu Göstermek
Problem sayılmaz ama ek bilgi olsun. Kod bloğu içerisinde liquid syntaxında yazdığınız kodu eğer raw tagleri içine almazsanız yazdığınız kodu göstermeyecek çalıştıracaktır.
{ % raw % }
Kodu buraya yaz.
Ve tabii ki yüzde ile küme parantezleri arasında boşluk olmamalı.
{ % endraw % }