katexの使い方がわからない

javascriptからlatexを数式として表示をしたく，katexを使用していますが，なぜかうまく使用できません

javascript
1const resultElement = this.refs.result;
2katex.render("\frac {3}{4}", resultElement);

このようにすれば3/4を表示できると思ったのですが，
結果は

html
1\frac {3}{4}43

と表示されます

環境はReactとwebpackを用いて書いています．katexのバージョンは0.10.0-rc.1でdiv要素に対して行なっています．
なにか追加で書かなくてはいけないとか特定の処理をしなくてはならないのでしょうか？よろしくお願いします

行動規範の内容に同意します

回答3件

Auto-render Extension を使う方法が最も簡単なのではないかと思います。

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="utf-8">
5    <title>test</title>
6    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.css" integrity="sha384-D+9gmBxUQogRLqvARvNLmA9hS2x//eK1FhVb9PiU86gmcrBrJAQT8okdJ4LMp2uv" crossorigin="anonymous">
7    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.min.js" integrity="sha384-483A6DwYfKeDa0Q52fJmxFXkcPCFfnXMoXblOkJ4JcA8zATN6Tm78UNL72AKk+0O" crossorigin="anonymous"></script>
8    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-yACMu8JWxKzSp/C1YV86pzGiQ/l1YUfE8oPuahJQxzehAjEt2GiQuy/BIvl9KyeF" crossorigin="anonymous"
9    onload="renderMathInElement(document.body);"></script>
10  </head>
11  <body>
12    <div>
13      [
14      \frac {3}{4}
15      ]
16    </div>
17  </body>
18</html>
19

投稿2018/08/27 12:48

fiwa

総合スコア1192

ベストアンサー

試してみたところ、KaTeXのCSSファイルを読み込めていないとそのような表示になってしまうようです。

Note that you have to bundle the stylesheet (katex.css) or include it manually.

Browser · KaTeX

CSSファイルをwebpackから利用できるようにするにはwebpack.config.jsにloaderを記述する必要があります。
Loading CSS - Asset Management | webpackjs.org

今回のkatex.cssの場合は、CSSからフォントファイル(ttf,woff,woff2)も読み込まれているので、フォントファイルに対してもloaderを設定する必要があります。
Loading Fonts - Asset Management | webpackjs.org

必要なloaderの設定としては下記のとおりです。
(npm install --save-dev style-loader css-loader file-loaderをお忘れなく。)

javascript
1// webpack.config.js の一部
2rules: [
3  {
4    test: /.css$/,
5    use: [
6      'style-loader',
7      'css-loader'
8    ]
9  },
10  {
11    test: /.(ttf|woff2?)$/,
12    use: [
13      'file-loader'
14    ]
15  }
16]

投稿2018/08/26 17:11

編集2018/08/27 14:10

reosablo

総合スコア339

YukiShimada

2018/08/27 06:42 編集

!なるほど，ありがとうございますライブラリはscriptタグで読み込んでいるのでしょうか...? 僕はimport文で呼び出しているのですが，以下のコードでうまく行くかと思いきやエラーが出てしましました ``` import 'katex/dist/katex.min.css'; import katex from 'katex'; ``` ```エラー文です Uncaught Error: Module parse failed: Unexpected character '