MarkedとKatexで数式を表示する

ツイート
2021年08月29日
2021年08月30日

ドキュメント

インストール

bash
npm install marked katex yarn add marked katex

実装

jsx
import marked from 'marked' import katex from 'katex' import 'katex/dist/katex.min.css' // 👈 CSSも忘れずに // 数式の表現 const mathsExpression = (expr) => { if (expr.match(/^\$\$[\s\S]*\$\$$/)) { expr = expr.substr(2, expr.length - 4) return katex.renderToString(expr, { displayMode: true, noannotation: true }) } else if (expr.match(/^\$[\s\S]*\$$/)) { expr = expr.substr(1, expr.length - 2) return katex.renderToString(expr, { isplayMode: false }) } } // カスタムレンダー export const customPreviewRender = (text) => { const renderer = new marked.Renderer() // code renderer.code = (code, lang, escaped) => { if (!lang) { const math = mathsExpression(code) if (math) { return math } } else { return `<pre><code class="hljs ${lang}">${hljs.highlightAuto(code, [lang]).value}</code></pre>` } } // codespan renderer.codespan = (text) => { const math = mathsExpression(text) if (math) { return math } return `<code>${text}</code>` } return marked(text, { renderer: renderer }) }

書き方

## code /``` $ L = \frac{1}{2} \rho v^2 S C_L $ /``` /``` $$ L = \frac{1}{2} \rho v^2 S C_L $$ /``` ## codespan `$L = \frac{1}{2} \rho v^2 S C_L$` `$$L = \frac{1}{2} \rho v^2 S C_L$$`

marked-katex