markdown-it-katexを使ってみる - 数式エディタ

markdown-it-katexを使って数式を表示する試みです。

１．環境設定

今回は以下のライブラリを使います。

markdown-it
Markdown parserです。pluginで拡張可能です。

markdown-it-katex
Markdown-it用の KaTeX plugin です。
KatexはMathJaxと同様のlatexライブラリですが、軽量高速が特徴です。

基本的な環境はcreate-react-appを使います。

npx create-react-app katex
cd katex
rm -rf src
npm i markdown-it  markdown-it-katex  --save

src/indexjs

import React, { Component } from 'react'
import { render } from 'react-dom'

import 'katex/dist/katex.min.css'   // *** 必須です！
import MarkdownIt from 'markdown-it';
import mk from 'markdown-it-katex';

const md = new MarkdownIt();

md.use(mk)


const result = md.render('# 正規分布です。 \n  $f(x) = \\frac{1}{\\sqrt {2\\pi \\sigma^2}} \\exp\\Biggl(-\\frac{(x-\\mu)^2}{2\\sigma^2}\\Biggr) \\qquad (-\\infty<x<\\infty)$');


class App extends Component {

  render() {
    return (
      <div>
        <div dangerouslySetInnerHTML={{__html: md.render('# markdown-it rulezz!')}}></div>
        <div dangerouslySetInnerHTML={{__html: result }}></div>
      </div>
    )   
  }
}

render(<App />, document.getElementById('root')) 

２．試してみる

問題なく表示できましたが、少しフォントが薄いような気がします。
MathJaxのほうも試してみるかな。

今日はここまでです。

draft.jsでMathJaxを使ってみる - 数式エディタ - Qiita
markdown-it-katexを使ってみる - 数式エディタ - Qiita