0

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.jsimport 'katex/dist/katex.min.css'を読み込んだのですが上手く行きませんでした。
ファイルの中身を見ると math math-display に関する記述は見られなかったので別のCSSが必要な気がします。

参照

https://github.com/remarkjs/remark-math

3

1 件の回答 1

0

remark-html-katexを使用する事で上手く動作しました。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。