published on 21.05.2018

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.
1
2
3
4
{{ 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.

1
2
3
4
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.

1
2
3
4
{ % raw % }
  Kodu buraya yaz.
  Ve tabii ki yüzde ile küme parantezleri arasında boşluk olmamalı.
{ % endraw % }
You are reading the 4th of 19 episodes in Jekyll.
Published on 21.05.2018 by Mert Bakır with commit 5ebb327.
jekyll
#code-highlighting #jekyll #web-dev
Next episode:
Mathjax ile Matematiksel Gösterimler
published on 13.06.2018

Eğer, matematiksel bir şeyler yazıyorsanız matematiksel gösterimlere de ihtiyacınız olacaktır. Bu konuda akla ilk gelen belge hazırlama sistemi LaTeX‘dir. Peki, bir jekyll blogunda bu iş nasıl yapılır? Kullandığınız markdown işleyicisine göre farklı seçeneklere yönelebilirsiniz. Ben, kendi …

published on 16.06.2018

Eğer yazılarımıza etiket ekleyip arşivimizi de etiketlere göre filtrelemek istiyorsak, ihtiyacımız olanlar; […] Oldukça kolaydır, aşağıdaki gibi oluşturulabilir: […] 1 2 3 4 {% assign posts = site.posts | sort: "date" | reverse %} {% for post in posts %} <li><a …

published on 31.05.2018

Daha önce Liquid: Sayfalandırma ve Dizi Filtreleme konusunda birkaç dizi operasyonundan ve döngülerden bahsetmiştim. Şimdi stringler ile oynayacağız. Öncelikle belirteyim, liquid syntax’ı kesinlikle matematikte iyi değil, zaten amacı da o değil. Buna bağlı olarak jekyll ile dinamik yapılar …

published on 30.08.2020
edited on 23.01.2021

Mainly there are two ways of syntax highlighting. One is server-side and the other is client-side. Names are already self-explanatory, client-side highlighting occurs on the user’s browser via javascript. Highlight.js is one of the popular libraries which covers a crazy amount of languages. On …

published on 21.08.2020

Hugo için rss-feed-in-hugo yazısını paylaştıktan sonra fark ettim ki jekyll için yazmamışım. İki yol göstereceğim, birincisi eklenti ile ikincisi liquid kodu ile. […] Eklenti ile yapmak oldukça kolay. Gemfile’ınıza gem 'jekyll-feed' satırını ekleyin ve _config.yml dosyasına ise …

published on 27.01.2019

Sitemap, sitemap.xml dosyası, bir websitesinin içeriğinin gösterildiği modeldir. URL’lerden oluşur. Search enginelerin crawl botlarla siteyi dolaşabilmelerine yardımcı olur. Sitemap, crawler’ın tüm sayfaları indexleyeceğini garantilemez; ancak yine de büyük arama motorları sitemap …

published on 21.01.2019

Jekyll’da varsayılan olarak gelen yapıda tüm postları _posts/ klasörü altında tutarız. Post sayısı arttıkça postları gruplama, alt klasörlere bölme ihtiyacı duyabilirz. Jekyll hâlâ postları görecek ve site.posts değişkeni, _posts/ ve altındaki tüm alt dizinlerdeki tüm postları getirecektir. …