问题描述
我可以问你关于我的问题吗?我正在尝试将 remark-math 应用于我的 Elder.js 博客。 它没有正确呈现。像这样。
降价
$$
\sin^2x + \cos^2x = 1
h \circ (g \circ f) = (h \circ g) \circ f = h \circ g \circ f
$$
渲染的 html
<div class="math math-display">
\sin^2x + \cos^2x = 1
h \circ (g \circ f) = (h \circ g) \circ f = h \circ g \circ f
</div>
https://twinstae.github.io/category-for-functional/
我做了以下。
- npm install remark-math remark-katex
- 将 katex css 添加到头部
- 将所有默认管道和remarkMath、remarkKatex添加到elder.config.js
elder.config.js
plugins: {
'@elderjs/plugin-markdown': {
routes: ['blog'],remarkPlugins: [
frontmatter,// 'remark-frontmatter' package
[extractFrontmatter,{ name: 'frontmatter',yaml: yaml.parse }],// 'remark-extract-frontmatter' and 'yaml' packages.
remarkSlug,// 'remark-slug' package
remarkMath,remarkKatex,remarkHtml,// 'remark-html' package
],},...
}
elder.config.js 链接 https://github.com/twinstae/twinstae.github.io/blob/master/elder.config.js
remark-plugin 链接的文档
https://www.npmjs.com/package/@elderjs/plugin-markdown#remark-plugins
我正在尝试几个插件命令,搜索,再次阅读 Elder.js 文档...
感谢您的阅读。 :)
解决方法
我找到了答案! rehype-katex 是 rehype
的插件新的elder.config.js
const remarkMath = require('remark-math');
const remark2rehype = require('remark-rehype');
const rehypeKatex = require('rehype-katex');
const rehypeStringify = require('rehype-stringify');
... (default plugins),remarkMath,remark2rehype,<- I missed this
rehypeKatex,rehypeStringify,<- I missed this too