前言

最近想用 Vuepress 搭建个人博客，因为 VuePress 是一个以 Markdown 为中心的静态网站生成器，正好可以用来发布 Markdown 笔记，但是使用后发现 Vuepress 对 Markdown 语言的支持一般，特别是不支持 LaTex 公式。好在 Vuepress 支持 Markdown 插件扩展，进而可以支持 LaTex 公式，但其中有一些坑，经过一晚上的探索以后终于成功在浏览器中渲染出来了。

步骤

在 Vuepress 项目中安装 markdown-it-katex

 代码块
clike
自动换行
复制代码
yarn add markdown-it-katex复制成功

2. 进入 config.ts，项目结构如下

 代码块
clike
自动换行
复制代码
├─ docs
│  ├─ .vuepress
│  │  └─ config.ts
│  └─ README.md
├─ .gitignore
└─ package.json复制成功

3. 在 config.ts 的 defineUserConfig 中写入如下配置

 代码块
JavaScript
自动换行
复制代码
export default defineUserConfig&amp;lt;DefaultThemeOptions, ViteBundlerOptions&amp;gt;({
   // ,,,
// other configs
   
   extendsMarkdown: md =&amp;gt; {
       md.use(require(&amp;#39;markdown-it-katex&amp;#39;))
       md.linkify.set({ fuzzyEmail: false })
   },
   
   // other configs
   // ...
})复制成功

4. 在 .vuepress 目录中创建 styles 目录，并新建 index.scss 文件，目录结构如下

 代码块
clike
自动换行
复制代码
├─ docs
│  ├─ .vuepress
│  │  ├─ styles
│  │  │  └─ index.scss
│  │  └─ config.ts
│  └─ README.md
├─ .gitignore
└─ package.json复制成功

5. 在 index.scss 文件中引入 css 文件

 代码块
CSS
自动换行
复制代码
@import &amp;quot;https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.5.1/katex.min.css&amp;quot;;
@import &amp;quot;https://cdn.jsdelivr.net/github-markdown-css/2.2.1/github-markdown.css&amp;quot;;复制成功

6. 在 README.md 中输入公式测试

 代码块
clike
自动换行
复制代码
# Maxwell&amp;#39;s Equations


equation | description
----------|------------
$\nabla \cdot \vec{\mathbf{B}}  = 0$ | divergence of $\vec{\mathbf{B}}$ is zero
$\nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t}  = \vec{\mathbf{0}}$ |  curl of $\vec{\mathbf{E}}$ is proportional to the rate of change of $\vec{\mathbf{B}}$
$\nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} = \frac{4\pi}{c}\vec{\mathbf{j}}    \nabla \cdot \vec{\mathbf{E}} = 4 \pi \rho$ | _wha?_

![electricity](http://i.giphy.com/Gty2oDYQ1fih2.gif)复制成功

运行项目后应该能正常显示 LaTex 公式

本文为我原创，未经授权禁止转载

cv12474593

分享至

投诉或建议