我如何將 remark-math, katex 應用到我的 Elder.js 博客？

Question

我可以問你我的問題嗎？ 我正在嘗試將 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

配置文件

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

備注插件鏈接的文檔

https://www.npmjs.com/package/@elderjs/plugin-markdown#remark-plugins

我正在嘗試幾個插件訂單，搜索，再次閱讀 Elder.js 文檔......

感謝您的閱讀。 :)

Answer 1

我找到了答案！ 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