Hugo & KaTeX · /dev/random

Sublime TextでTex書類を作成できるのは便利なんだけどhtmlの中に数式を埋め込みたい欲求が出てきた。

　Hugoで利用できる描画ライブラリMathJaxは遅いみたいなのでKaTeXを利用してみることにしました。
　カーンアカデミーが開発しているKaTeXはjs,css,fontファイルで構成されている。　Hugoで利用するためにはフォントフォルダにフォントを入れて、jsフォルダにkatex.js関係を入れて、サイトで使用中のテーマのstaticのcssにkatex.cssなどを入れる。Hugo serverのライブリロードで確認できる。

head.hrml

<!-- KaTeX -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" integrity="sha384-wITovz90syo1dJWVh32uuETPVEtGigN07tkttEqPv+uR2SE/mbQcG7ATL28aI9H0" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js" integrity="sha384-/y1Nn9+QQAipbNQWU65krzJralCnuOasHncUFXGkdwntGeSvQicrYkiUBwsgUqc1" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js" integrity="sha384-dq1/gEHSxPZQ7DdrM82ID4YVol9BYyU7GbWlIwnwyPzotpoc57wDw/guX8EaYGPx" crossorigin="anonymous"></script>

footer.html

<script>
  renderMathInElement(document.body,
    {
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "$", right: "$", display: false},
        ]
    }
  );

  var inlineMathArray = document.querySelectorAll("script[type='math/tex']");
  for (var i = 0; i < inlineMathArray.length; i++) {
    var inlineMath = inlineMathArray[i];
    var tex = inlineMath.innerText || inlineMath.textContent;
    var replaced = document.createElement("span");
    replaced.innerHTML = katex.renderToString(tex, {displayMode: false});
    inlineMath.parentNode.replaceChild(replaced, inlineMath);
  }

  var displayMathArray = document.querySelectorAll("script[type='math/tex; mode=display']");
  for (var i = 0; i < displayMathArray.length; i++) {
    var displayMath = displayMathArray[i];
    var tex = displayMath.innerHTML;
    var replaced = document.createElement("span");
    replaced.innerHTML = katex.renderToString(tex.replace(/%.*/g, ''), {displayMode: true});
    displayMath.parentNode.replaceChild(replaced, displayMath);
  }
</script>

index.html

<head>
  {{ partial "head.html" . }}
</head>

ファイルパスは

/themes/your_theme/layouts/partials/head.html
/themes/your_theme/layouts/partials/footer.html
/themes/your_theme/layouts/index.html

　後はLaTexでは図形を描けたけどSVGで簡単に埋め込めないものだろうか..

Menu