経緯 
KaTeX の Installation のドキュメントで browser 見ながら、CDN 使わずローカルに配置してレンダリング試そうとしたのだが、
なぜか、.katex-mathml と .katex-html が両方表示されるし、display style になってくれないし、.katex-html の部分はなんかレンダリングも狂ってしまう。
しばらく悩んで、公式リポジトリのサンプル 等もコピペしてみたが、これもなぜかうまくレンダリングされない。
で、たどり着いたのが
わけわからんぞーって、
仕方がないので winmerge で diff 取ってようやく見つけた原因が、
rel とすべきところを ref とミスタイプしてしまっていたという地味に見つけにくい凡ミス。
公式のサンプルも良く見ると、なぜか katex.css 設定されてないし、地味に辛い。
面倒臭がらずに installation のコードコピペすればよかったのか？
なぜか、.katex-mathml と .katex-html が両方表示されるし、display style になってくれないし、.katex-html の部分はなんかレンダリングも狂ってしまう。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link ref="stylesheet" href="katex.min.css"/>
<script defer src="katex.min.js"></script>
<script defer src="auto-render.js" onload="renderMathInElement(document.body);"></script>
</head>
<body>
<div>\[\sum_{i=0}^N x_i\]</div>
</body>
</html>
明示的に displayMode 設定したり、
<script defer src="auto-render.js" onload="renderMathInElement(document.body,{displayMode: true});"></script>
onload の所を外に出したり、更には個別に display の設定して
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters: [
{left: "$$", right: "$$", display: true},
{left: "\\[", right: "\\]", display: true},
{left: "$", right: "$", display: false},
{left: "\\(", right: "\\)", display: false}
],
});
});
みたいにしてもさっぱり効果がない。しばらく悩んで、公式リポジトリのサンプル 等もコピペしてみたが、これもなぜかうまくレンダリングされない。
で、たどり着いたのが
- stackoverflow / 2014-12-09: How can I render all inline formulas in $..$ with KaTeX?
わけわからんぞーって、
仕方がないので winmerge で diff 取ってようやく見つけた原因が、
<link ref="stylesheet" href="katex.min.css"/>じゃなくて
<link rel="stylesheet" href="katex.min.css"/>だよっていう orz
rel とすべきところを ref とミスタイプしてしまっていたという地味に見つけにくい凡ミス。
公式のサンプルも良く見ると、なぜか katex.css 設定されてないし、地味に辛い。
面倒臭がらずに installation のコードコピペすればよかったのか？
関連
タグ
コメントをかく