にっき♪: 引っ越し＆KaTeX使ってみた

というわけでお引っ越し．これで数式も使えます．$\int_{-\infty}^\infty e^{-x^2}dx = \sqrt{\pi}$．

数式はMathJaxではなくてKaTeXを使ってみました．xyzzyのマクロとは関係なく全く同じ名前で全然別の物が作られたらしい（ややこしい……）．特徴は「速さ」だそうだ．確かにかなり速い．ただ，現状\mathrmも\mathbbも\mathcalも実装されていないので，今のところはMathJaxを使っておく方がよいかなと……．

シンプルなコードはこんな感じ．

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.css"/>
<!-- スクリプトのロード -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/katex.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.3.0/contrib/auto-render.min.js"></script>
<style type="text/css">
span.katex{
    text-indent: 0;
}
</style>
</head>
<body>
<p>$\int_{-\infty}^\infty e^{-x^2}dx = \sqrt{\pi}$</p>
<!-- 数式レンダリングを実行 -->
<script>
renderMathInElement(
    document.body,{
        delimiters: [
            {left: "$$", right: "$$", display: true},
            {left: "\\[", right: "\\]", display: true},
            {left: "$", right: "$", display: false},
            {left: "\\(", right: "\\)", display: false}
]});
</script>
</body>
</html>

基本的にはスクリプトをロードし，</body>の直前でrenderMathInElementを呼び出せばよいみたい．renderMathInElementの第二引数は数式モードに移行する文字の設定で，MathJax同様$はデフォルトでは除外されているので追加している．

二つほど注意点．

text-indentが正だと結果が乱れるのでspan.katexのそれを（念のため）0に設定している．解決済みらしいのでそのうち不要になるかと．
DOCTYPE宣言は<!DOCTYPE html>（HTML5）がよさげ．他のにしたら動かなかった．

とりあえずこれにしてみますが，ちょっと制約がきついので必要になったらMathJaxにするかも．

にっき♪

2015年4月22日

引っ越し＆KaTeX使ってみた

0 件のコメント:

コメントを投稿