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

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 ile LaTeX syntaxında dilediğimiz gibi matematiksel formülleri yazabiliriz. Hemen bir örnek verelim:

Girdi:

$$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:

$$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}$$


MathJaX Nasıl Kullanılır

Şimdi gelelim, MathJax’ı Jekyll’da nasıl kullanacağımıza. Jekyll diyorum ama herhangi bir static websitesinde de aynı mantıkta çalışacaktır.

  1. MathJax scriptini ekleyelim.

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.

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

Yukarıdaki kodu direkt kopyala yapıştır yapmayın, güncel sürümü kullanmanız daha iyi olacaktır.

Küçük bir iyileştirme yapalım. 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:

{% 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.


Konfigürasyon

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

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

Notlar:

  • “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.

  • 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 $...$ varsayılan olarak tanımlı değil ancak eklenebilir. Aşağıda paylaştığım konfigurasyonda ekli tek dolar notasyonu çalışacaktır.

You are reading the 5th of 19 episodes in Jekyll.
Published on 13.06.2018 by Mert Bakır with commit 7dfab23.
jekyll
#jekyll #latex #static-site
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: […] {% 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ü. {% for post in site.posts%} // Do something here {% endfor %} Hemen karşınıza çıkmayan bazı incelikleri var. Onları paylaşalım: {% for i in (0..10) %} {{i}} {% endfor %} …

published on 10.07.2022

Previously, I’ve published a blog post about deploying static content on heroku with basic authentication. You can find the link here. In that post, we hosted the source code on GitLab and configured a CI/CD pipeline to render the static content a.k.a html files and push these files to Heroku. …

published on 28.05.2022

Each git commit has a field called Author which consists ‘user.name’ and ‘user.email’. We usually set these variables once, after installing git, with git config --global so that each repo gets the variables from the global definition. We can also set them locally for a …

published on 25.05.2022

In this post, I’ll first walk through hosting static content with basic authentication. Then, we’ll look into deploying to Heroku using GitLab Pipelines, more specifically deploying a certain sub-directory within the project instead of pushing the whole project. Also, I’ll share …

published on 17.04.2022
edited on 15.07.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …