# VuePress@next 使用數學公式插件 搞了一個VuePress1.0的 現在升級了一下，但是使用數學公式的插件老報錯啊！經過不懈努力，終於搞定了。現在記錄一下。 ## VuePress 介紹 [VuePress](https://vuepress.github.io/zh) 是一個以 M ...
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]
-
卸載之前沒有用的包，我用的npm；
-
安裝新的包"@mdit/plugin-katex"
npm install @mdit/plugin-katex -
修改配置；
import { katex } from '@mdit/plugin-katex' export default defineUserConfig({ // …… 省略了沒有必要的 extendsMarkdown: (md) => { md.use(katex); md.linkify.set({ fuzzyEmail: false }); }, }) -
還需要在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
