memorandums

日々の生活で問題解決したこと、知ってよかったことなどを自分が思い出すために記録しています。

jekyllの講義ページでtexを使いたかった

今期、cloudflare pagesでjekyllでmdからhtmlに変換したページを講義ページにする作業をしまして。色々ありましたが、とりあえず使えています。講義資料をアップデートするのにgit pushしなければならないのはなかなか面倒ですが、学生のウケも悪くはないようです(一覧性がよい)。

とはいえ、mdでは限界があって、複雑なものはとりあえず図にしてきたのですが、その図も可能であればスクリプトで生成したいっていう話でmermaidを使えるようにしたのが以下の記事でした。

入学式からの昨日の宿題2件を消化した話 - memorandums

さらに、とある授業で数式を埋め込みたくなり、数式とくれば図よりtexの方が馴染みがあるので使いたいな。。。と。あれこれやってとりあえず動いた設定が以下だけです。

_includes/head-custom.html に以下を追加する。

<script>
    MathJax = {
        tex: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            processEscapes: true,
            tags: 'ams'
        }
    };    
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>

参考にさせていただいたのが以下の記事です。

Jekyll の Bulma Clean Theme に MathJax を組み込む | めもらんだむ

mdでは以下のように記述すれば数式になります。

$y=ax+b$ ←インライン数式モード

$$y=ax+b$$ ←ディスプレイ数式モード 

補足

他の情報を参考にしたときに、( ) や [ ]で数式にする記事がありましてこれに沿ってやってみたのですが、vscodeではプレビューしないので嫌だな。。。と思って探しました。また、tex-chtml.jsではなく、tex-mml-chtml.jsをリンクする記事もありましたが、mmlはtexと同じく数式を表現する言語らしいですが僕は使わないのでこちらを選択しています。当然ですがmmlに対応していない方がjsのファイルサイズも小さいので。