nuxt contentで数式を埋め込む
2020-12-10
nuxt/content を利用すると簡単に Markdown 形式で記事を書くことができるようになります.
Markdown を HTML に自動変換してくれますが,数式を LaTeX で埋め込んだ部分はデフォルトでは変換できないのでプラグインで対応してみます.
パッケージ追加
terminal
$ yarn add remark-math rehype-mathjax
それぞれのパッケージの用途は以下の通りです.
remark-math
:$
で囲んだ部分をインライン数式,$$
で囲んだ部分を数式用のHTMLタグに置換rehype-mathjax
: HTMLタグを数式(SVG)に変換
参考元では rehype-katex
を使用していましたが,変換がうまく動かなかったので remark-mathjax
を使用します.
設定ファイルの編集
export default {
...
content: {
markdown: {
remarkPlugins: [
'remark-math'
],
rehypePlugins: [
'rehype-mathjax'
]
}
}
...
}