VuePress@next 使用數學公式插件

VuePress@next 使用數學公式插件

搞了一個VuePress1.0的 現在升級了一下，但是使用數學公式的插件老報錯啊！經過不懈努力，終於搞定了。現在記錄一下。

VuePress 介紹

VuePress 是一個以 Markdown 爲中心的靜態網站生成器。你可以使用 Markdown 來書寫內容（如文檔、博客等），然後 VuePress 會幫助你生成一個靜態網站來展示它們。

遇到的問題

使用數學公式的庫，根據網上找的 markdown-it-texmath,markdown-it-katex,markdown-it-mathjax3,這些都可以，然而當我使用了之後沒有一個有用的，報錯信息(Error: Dynamic require of "markdown-it-mathjax3" is not supported)詳細的參見後面的哦！

此時我的配置：

export default defineUserConfig({
  base: '',
  lang: 'zh-CN',
  title: '',
  description: description,
  head: head,
  theme: defalutThemeOK,
  markdown: {
    code: {
      lineNumbers: false,
    }
  },
  extendsMarkdown: (md) => {
    md.use(require('markdown-it-mathjax3')); // 使用這個解析 數學公式
    md.linkify.set({ fuzzyEmail: false });
  }, 
})

報錯信息

⠋ Initializing and preparing dataerror error in hook extendsMarkdown from user-config
✖ Initializing and preparing data - failed in 33ms
Error: Dynamic require of "markdown-it-mathjax3" is not supported
    at file:///F:/StevenBlogs/docs/.vuepress/config.ts.166cda46.mjs:7:9
    at Object.extendsMarkdown [as hook] (file:///F:/StevenBlogs/docs/.vuepress/config.ts.166cda46.mjs:161:12)
    at Object.process (file:///F:/StevenBlogs/node_modules/@vuepress/core/dist/index.js:683:37)
    at async resolveAppMarkdown (file:///F:/StevenBlogs/node_modules/@vuepress/core/dist/index.js:160:3)
    at async appInit (file:///F:/StevenBlogs/node_modules/@vuepress/core/dist/index.js:604:18)
    at async file:///F:/StevenBlogs/node_modules/@vuepress/cli/dist/index.js:489:7
    at async file:///F:/StevenBlogs/node_modules/@vuepress/utils/dist/index.js:106:20
    at async CAC.dev (file:///F:/StevenBlogs/node_modules/@vuepress/cli/dist/index.js:488:5)

VuePress 2 成功配置

通過各種嘗試，和搜各種資料。最後算是我搞定了。

主要是參考了Maikdown It 插件的文章"@mdit/plugin-katex"[https://mdit-plugins.github.io/zh/katex.html]

1. 卸載之前沒有用的包，我用的npm；

2. 安裝新的包"@mdit/plugin-katex" npm install @mdit/plugin-katex

3. 修改配置；

   import { katex } from '@mdit/plugin-katex'
   
   export default defineUserConfig({
       // …… 省略了沒有必要的
       extendsMarkdown: (md) => {
           md.use(katex);
           md.linkify.set({ fuzzyEmail: false });
       }, 
       })
   

4. 還需要在head加樣式，要不然樣式就走樣子了。參考KaTeX

   export const head : HeadConfig[]=
   [
       ['meta', { name: 'theme-color', content: '#3eaf7c' }],
       ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
       ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
       ['link', { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css' }], // 讓md支持數學公式
       ['link', { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" }]  // 讓md支持數學公式
   ]
   

四步驟搞定：看看效果！

找了的一些文說明的

markdown-it-mathjax3 issues all closed
markdown-it-mathjax3 issues 57
渲染數學公式 順便說一下這個裏面有1.0的配置

1.0 VuePress 的配置

以下是我的1.0的配置，在本地運行也是正常的！

module.exports = {
    head: [
        ['meta', { name: 'theme-color', content: '#3eaf7c' }],
        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
        ['link', { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css' }],      // 讓md支持數學公式
        ['link', { rel: "stylesheet", href: "https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css" }]  // 讓md支持數學公式
    ],
    themeConfig: {
        plugins: [
        '@vuepress/plugin-back-to-top',
        '@vuepress/plugin-medium-zoom',
        ],
        extendMarkdown(md){  // 讓md支持數學公式 npm install markdown-it-katex
            md.set({html:true});
            md.use(require('markdown-it-katex'));
        }
    }
}

總結

通個這個的搞定，那麼使用其他Markdown It 插件都可以去這個網站找https://mdit-plugins.github.io/zh/，然後自己改改就能輕鬆融入了！還是的多琢磨！

另外提一下我搞到github上的網站! haha