Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

1.環境設定

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

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')) 

2.試してみる

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

image.png

今日はここまでです。

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away