首页vue markdown math

vue markdown math

时间: 2025-02-24 15:34:33 浏览: 48

### 实现 Vue 项目中的 Markdown 编辑器支持 LaTeX 数学公式 #### 安装依赖库为了使 Vue 项目能够处理带有 LaTeX 数学公式的 Markdown 文件，需要安装 `marked` 和 `katex` 库。`marked` 负责解析 Markdown 文本，而 `katex` 则专门用来渲染数学表达式。 ```bash npm install marked katex --save ``` #### 创建自定义组件创建一个新的 Vue 组件用于展示经过处理后的 HTML 内容： ```vue <template> <div v-html="compiledMarkdown"></div> </template> <script> import { marked } from 'marked'; import Katex from 'katex'; export default { props: ['source'], computed: { compiledMarkdown() { const renderer = new marked.Renderer(); // 自定义 inline math 渲染逻辑 renderer.math = function(text) { try { return Katex.renderToString(`\$${text}\$`, { throwOnError: false }); } catch (e) { console.error(e); return ''; } }; // 自定义 block level math 渲染逻辑 renderer.blockMath = function(text) { try { return Katex.renderToString(`\\[\n${text}\n\\]`, { displayMode: true, throwOnError: false }); } catch (e) { console.error(e); return ''; } }; marked.use({renderer}); return marked.parse(this.source || ''); }, }, }; </script> ``` 此代码片段展示了如何配置 `marked` 来识别 `$...$` 或者 `$$...$$` 形式的 LaTeX 表达式，并调用 `Katex.renderToString()` 方法将其转换为可显示的 HTML 片段[^1]。 #### 使用组件最后，在父级组件中引入刚刚创建好的子组件，并传递包含 LaTeX 的 Markdown 字符串作为属性值给它即可完成整个流程。需要注意的是，默认情况下 VuePress 并不支持直接渲染 LaTeX 语法的数学公式[^2]，因此上述方法提供了一种解决方案来克服这一局限性。

阅读全文