如下修改下，用的是typescript+vue声明的ts 1.先安装依赖包 npm install markdown-

动态未结 0 130

摘要：

如下修改下，用的是typescript+vue声明的ts 1.先安装依赖包 npm install markdown-it mathjax 2.src下面创建文件utils/mathjax.js，文件内容如下复制代码 window.MathJax = { tex: { inlineMath: [ ["$", "$"], ["\$", "\$"], ["$", "$"], ], // 行内公式选择符 displayMath: [ ["$$", "$$"], ["\\[", "\\]"], ], // 段内公式选择符 }, startup: { ready() { MathJax.startup.defaultReady(); }, }, }; 复制代码 3.main.js import "@/utils/mathjax"; import "mathjax/es5/tex-svg"; 4.页面代码复制代码 <template> <div>  <textarea v-model="text" rows="10" cols="50" placeholder="输入Markdown内容"></textarea>  <div style="width: 500px; overflow: auto; margin-top: 20px;"> <div v-html="renderedMarkdown"></div> </div> </div> </template> <script setup> import { ref, computed } from "vue"; import MarkdownIt from 'markdown-it'; // Markdown 内容 const text = ref(``); const mdi = new MarkdownIt({ html: false, linkify: true, }); // 处理并渲染Markdown内容 const renderedMarkdown = computed(() => { window.MathJax.startup.defaultReady(); return mdi.render(text.value); }); </script> <style scoped> textarea { width: 500px; height: 200px; } </style>

以下是将代码修改为 TypeScript + Vue 的版本： ### 1. 安装依赖包 ```bash npm install markdown-it mathjax npm install --save-dev @types/markdown-it ``` ### 2. 在 `src/utils/mathjax.js` 文件中配置 MathJax ```javascript window.MathJax = { tex: { inlineMath: [ ["$", "$"], ["\$", "\$"], ["$", "$"], ], // 行内公式选择符 displayMath: [ ["$$", "$$"], ["\\[", "\\]"], ], // 段内公式选择符 }, startup: { ready() { MathJax.startup.defaultReady(); }, }, }; ``` ### 3. 在 `main.ts` 中导入 MathJax ```typescript import "@/utils/mathjax"; import "mathjax/es5/tex-svg"; ``` ### 4. 页面代码 ```vue ``` ### 代码说明： 1. **TypeScript 类型定义**： - `text` 使用了 `ref` 来明确它是一个字符串类型的响应式变量。 - `renderedMarkdown` 使用了 `computed` 来明确它是一个字符串类型的计算属性。 2. **MarkdownIt 类型**： - 通过 `npm install --save-dev @types/markdown-it` 安装了 `markdown-it` 的类型定义，确保 TypeScript 能够正确识别 `MarkdownIt` 的类型。 3. **MathJax 配置**： - `window.MathJax` 的配置保持不变，确保 MathJax 能够正确渲染数学公式。 4. **样式**： - 样式部分保持不变，确保页面布局和输入框的样式符合预期。 ### 总结：通过将代码转换为 TypeScript，我们增加了类型安全性，确保在开发过程中能够捕获潜在的类型错误。同时，TypeScript 的类型推断和自动补全功能也能提高开发效率。