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