

mdファイルを取り扱うのに `remark` を使用しているので `remark-math` というものをドキュメントに沿ってインストールしたんですが、今で
`import` でモジュールを取り込んできたのに `require`
で読み込んでいてNext.jsではこのようなモジュールの取り込み方は出来るのでしょうか？ 一応ドキュメント通り `require`
で試してみたのですが、エラーが出ます。

見て頂けないでしょうか？よろしくお願いします。

[code]

    npm install remark-math rehype-katex
    
[/code]

### 使い方

[code]

    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))
      })
    
[/code]

### 追記

エラーは解決しました。  
実際に自分の環境に必要だったのは下記の2つのモジュールで `import` で読み込む事ができました。

[code]

    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
      }
    }
    
[/code]

それでクラスが付与されたHTMLを生成する事ができたんですが、CSSが上手く当てられません。

[code]

    <div class="math math-display">\log_a{b} = \frac{\log_c{b}}{\log_c{a}}</div>
    
[/code]

[ここ](https://blog.zenpachi.dev/posts/nextjs-blog-02/)のサイトを参考に  
`_app.js` で `import 'katex/dist/katex.min.css'`を読み込んだのですが上手く行きませんでした。  
ファイルの中身を見ると `math math-display` に関する記述は見られなかったので別のCSSが必要な気がします。

### 参照

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


CC BY-SA 4.0
2021-05-02T05:02:31.293
75625
2021-05-02T12:21:36.873
2021-05-02T06:50:01.897
22565
22565
question
javascript reactjs typescript npm next.js
Next.jsのブログkatexで書かれた数式を表示したい。


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


CC BY-SA 4.0
2021-05-02T12:21:36.873
75633
2021-05-02T12:21:36.873
22565
75625
answer