KaTex

⌚2019-09-03 18:38

数式をきれいに表示できるよう、「KaTeX」を導入した。

以前は「MathJax」を使っていたのだけど、とにかく遅い

というわけで、速いと評判の「KaTeX」に挑戦。

基本的には「KaTeXの公式サイト」の手順通りだけど、自分は基本的にnpmとかcdnとか信用してないので、サーバーローカルにインストールする。

まずは、「KaTeXのGitHub」から、ソース一式をもらってきて解凍。

  • katex.min.css
  • katex.min.js
  • fonts

をいい感じに配置。

<link rel="preload" href="{{ theme_url }}/apps/katex/fonts/KaTeX_Main-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{ theme_url }}/apps/katex/fonts/KaTeX_Main-BoldItalic.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{ theme_url }}/apps/katex/fonts/KaTeX_Main-Italic.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="{{ theme_url }}/apps/katex/fonts/KaTeX_Main-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="stylesheet" href="{{ theme_url }}/apps/katex/katex.min.css" type="text/css" />

<script src="{{ theme_url }}/apps/katex/katex.min.js" type="text/javascript"></script>

↑HTMLのタグもいい感じで。

あとは、ロード後にkatexクラス内の文字を置換するスクリプトを書く。

$(".katex").each(function(){
    katex.render($(this).html(), this);
});

インストール完了。おつかれさまでした。

<p class="katex">
e^{i\pi}+1=0
</p>

って書けば、

e^{i\pi}+1=0

↑こうなる

コメント

Name
Comment