vue+ts+markdown 集成mathjax 让数学公式能正常加载

在 Vue.js + TypeScript 项目中集成 MathJax 以支持 Markdown 中的数学公式渲染，可以按照以下步骤进行： ### 1. 安装依赖 首先，确保你已经安装了 `markdown-it` 和 `markdown-it-mathjax` 插件，以及 `mathjax`。 ```bash npm install markdown-it markdown-it-mathjax mathjax ``` ### 2. 创建 Markdown 渲染工具 在 `src/utils` 目录下创建一个 `markdownRenderer.ts` 文件，用于渲染 Markdown 并支持 MathJax。 ```typescript import MarkdownIt from 'markdown-it'; import mathjaxPlugin from 'markdown-it-mathjax'; const md = new MarkdownIt(); md.use(mathjaxPlugin()); export const renderMarkdown = (content: string): string => { return md.render(content); }; ``` ### 3. 在 Vue 组件中使用 在 Vue 组件中使用 `renderMarkdown` 方法来渲染 Markdown 内容。 ```vue ``` ### 4. 配置 MathJax 为了确保 MathJax 能够正确加载和渲染公式，你需要在页面加载时初始化 MathJax。可以在 `public/index.html` 中添加以下代码： ```html ``` ### 5. 运行项目 现在你可以运行项目并查看 Markdown 中的数学公式是否正确渲染。 ```bash npm run serve ``` ### 6. 注意事项 - 如果你使用的是 MathJax 3，确保你在 `index.html` 中正确引用了 MathJax 的 CDN 或本地文件。 - `markdown-it-mathjax` 插件会自动将 Markdown 中的数学公式转换为 MathJax 可以识别的格式。 - 如果你需要自定义 MathJax 的配置，可以在 `index.html` 中添加 MathJax 的配置脚本。 通过以上步骤，你可以在 Vue.js + TypeScript 项目中集成 MathJax，并确保 Markdown 中的数学公式能够正常加载和渲染。