にっき♪: KaTeX

速いMathJaxであるKaTeXについて．前にも書いたけどもう一度．いろいろと実装されてかなり使えるようになってきた．

シンプルには次のようになる．

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<!-- スクリプトのロード -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/contrib/auto-render.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css"/>
<!-- 数式レンダリングを実行 -->
<script>
document.addEventListener("DOMContentLoaded", function(){
  renderMathInElement(
    document.body,{
      delimiters: [
        {left: "$$", right: "$$", display: true},
        {left: "\\[", right: "\\]", display: true},
        {left: "$", right: "$", display: false}, // $で囲んでも数式と解釈されるようにする
        {left: "\\(", right: "\\)", display: false}
]})});
</script>
</head>
<body>
<p>$\int_{-\infty}^\infty e^{-x^2}dx = \sqrt{\pi}$</p>
</body>
</html>

結果はこんな風に：$\int_{-\infty}^\infty e^{-x^2}dx = \sqrt{\pi}$

MathJax同様，デフォルトでは$で囲んでも数式認識されないので，それをrenderMathInElementの引数に渡して登録している．
DOCTYPEの宣言は<!DOCTYPE html>（HMTL5）がよさそうで，他だと動かなかったことがあった．
レンダリング部分のスクリプトは，document.bodyを相手にrenderMathInElementをドキュメント読み込み時に実行するという内容．DOMContentLoadedに登録するのではなく，</body>直前にrenderMathInElementを実行するとしても良い．またdocument.bodyの部分をいじると一部だけを数式レンダリングの対象にすることもできる．
$などで囲まれた部分を数式として認識させるために，Auto-Rendering extensionを使っている．そうでないようにもできるけどあまり使い勝手よくなさそう……．

にっき♪

2017年5月3日

KaTeX

0 件のコメント:

コメントを投稿