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 kullandığım ve şu anda da github sayfalarının varsayılan markdown işleyicisi “kramdown” üzerinden devam edeceğim. Araştırdığınızda karşınıza kramdown’un mathjax desteklediği ancak built-in gelmediğini bulacaksınız. Kramdown-Math Engine

Yine, araştırdığınızda mathjax için birçok blogda birçok farklı konfigurasyon görebilirsiniz ve büyük olasılıkla istediğiniz sonucu vermeyeceklerdir. Kimisi eski kalmış, kimisi sadece scripti eklemeyi göstermiş. Burada bazı temel konfigurasyonları açıklayacağım, fazlası için en iyi kaynak her zaman olduğu gibi orijinal güncel dokümanlar olacaktır: MathJax-Documentation.

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

MathJax Nedir ?

MathJax; LaTeX, MathML, AsciiMath notasyonlarının tarayıcılarda görüntülenmesini sağlayan açık kaynaklı JavaScript görüntü motorudur.

MathJax Scriptini Ekle

Aşağıdaki kodu sayfanın <head> kısmına eklemeniz, MathJax’ın sayfanızda çalışması için yeterli olacaktır. Bu sayede yazdığınız matematiksel ifadeler güzelce görüntülenecek.

1
2
3
<script type="text/javascript" async
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML">
</script>

İyileştirme

Eğer her sayfada matematiksel ifadelere yer vermiyorsanız, head include’una eklemeniz verimsiz ve gereksiz olacaktır. Bunun için ben _include klasörü altında mathjax.html dosyası oluşturdum. Gerekli konfigurasyonları da o dosyada yaptım. Daha sonra bu dosyayı yalnızca mathjax kullanacağım sayfalarda çağırdım.

post layoutuna aşağıdaki kodu ekledim:

1
2
3
{% if page.mathjax %}
  {% include mathjax.html %}
{% endif %}

ve buna göre mathhjax’ın yüklenmesini istediğim sayfarın front-matterına mathjax: true satırını ekledim. Böylece sadece belli sayfalarda yüklenecek ve kullanmadığımız sayfalarda boşu boşuna yük olmayacak.

Ayarlar

Benim mevcut ayarlarım aşağıdaki gibi, _include/mathjax.html dosyası içeriği:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      jax: ["input/TeX", "output/HTML-CSS"],
      tex2jax: {
        inlineMath: [ ['$', '$'], ["\\(", "\\)"] ],
        displayMath: [ ['$$', '$$'], ["\\[", "\\]"] ],
        processEscapes: true,
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
      },
      "HTML-CSS": { linebreaks: { automatic: true } },
      //,
      //displayAlign: "left",
      styles: {

        ".MathJax":{
            display: "inline-block"
        },

        ".MathJax_Display": {
          "text-align": "center",
          margin:       "1em 0em"
        },
        ".MathJax .merror": {
          "background-color": "#FFFF88",
          color:   "#CC0000",
          border:  "1px solid #CC0000",
          padding: "1px 3px",
          "font-style": "normal",
          "font-size":  "90%"
        }
      },
      MathML: {
        useMathMLspacing: true
      }
      });
  </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS-MML_HTMLorMML" async></script>

“linebreak” özelliğini aktifleştirmezseniz, uzun bir satır kendini çevreleyen elemanın dışına çıkacaktır. Özellikle küçük ekranlı telefonlarda sayfa istemediğiniz şekilde yüklenebilir.

Örnek

Artık LaTeX syntaxında dilediğiniz gibi yazabilirsiniz. Varsayılan durumda satır içi yazmak için \\(..\\), ayrı yazmak için \\[...\\] veya $$...$$ formatı kullanılıyor, yani satır içi yazmak için tek dolar $...$ tanımlı değil ancak eklenebilir ve yukarıdaki konfigurasyonda ekli.

Girdi:

1
$$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz$$

Çıktı:

$$f(a) = \frac{1}{2\pi i} \oint\frac{f(z)}{z-a}dz$$

Backslash ("") ise alışılagelmiş escape operatörü.

Girdi:

1
$$X_{i,j} \in \{0,1\} \qquad \forall {i,j}$$

Burada backslash ile küme parentezlerini işlememesi ve olduğu gibi yazdırması gerektiğini belirtiyoruz.

Çıktı:

$$X_{i,j} \in {0,1} \qquad \forall {i,j}$$

İlgili Bağlantılar

You are reading the 5th of 19 episodes in Jekyll.
Published on 13.06.2018 by Mert Bakır with commit 7858b9b.
jekyll
#jekyll #latex #web-dev
Next episode:
Etiketler
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 03.07.2018

Bu yazıda liquid syntaxında forloop’dan bahsedeceğiz. Yeni başlayanların da ilk karşılaştıkları klasik yapı, for döngüsü. […] 1 2 3 {% for post in site.posts%} // Do something here {% endfor %} Hemen karşınıza çıkmayan bazı incelikleri var. Onları paylaşalım: […] 1 2 3 {% for …

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 21.08.2020

Math typesetting, or rendering LaTeX, in Hugo is not a hard task. We have two popular alternatives. First one is mathjax, I was using it before with jekyll. The other popular library for math typesetting is KaTeX. Since it’s is faster, this time I’ll go with KaTeX. Implementing these …

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. …