mdファイルを取り扱うのに remark
を使用しているので remark-math
というものをドキュメントに沿ってインストールしたんですが、今で import
でモジュールを取り込んできたのに require
で読み込んでいてNext.jsではこのようなモジュールの取り込み方は出来るのでしょうか? 一応ドキュメント通り require
で試してみたのですが、エラーが出ます。
見て頂けないでしょうか?よろしくお願いします。
npm install remark-math rehype-katex
使い方
const vfile = require('to-vfile')
const unified = require('unified')
const markdown = require('remark-parse')
const math = require('remark-math')
const remark2rehype = require('remark-rehype')
const katex = require('rehype-katex')
const stringify = require('rehype-stringify')
unified()
.use(markdown)
.use(math)
.use(remark2rehype)
.use(katex)
.use(stringify)
.process(vfile.readSync('example.md'), function (err, file) {
if (err) throw err
console.log(String(file))
})
追記
エラーは解決しました。
実際に自分の環境に必要だったのは下記の2つのモジュールで import
で読み込む事ができました。
import math from 'remark-math'
import katex from 'rehype-katex'
export async function getHtmlContent(article: Article) {
const processedContent = await remark()
.use(html)
.use(math)
.use(katex)
.use(prism)
.process(article.content)
const contentHtml = processedContent.toString()
return {
...article,
content: contentHtml
}
}
それでクラスが付与されたHTMLを生成する事ができたんですが、CSSが上手く当てられません。
<div class="math math-display">\log_a{b} = \frac{\log_c{b}}{\log_c{a}}</div>
ここのサイトを参考に
_app.js
で import 'katex/dist/katex.min.css'
を読み込んだのですが上手く行きませんでした。
ファイルの中身を見ると math math-display
に関する記述は見られなかったので別のCSSが必要な気がします。