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

动态未结 0 91

摘要：

如下修改下，用的是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>

&lt;!-- 显示渲染的Markdown内容 --&gt;
&lt;div style="width: 500px; overflow: auto; margin-top: 20px;"&gt;
  &lt;div v-html="renderedMarkdown"&gt;&lt;/div&gt;
&lt;/div&gt;

</div> </template>

// 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>

以下是将代码修改为 TypeScript + Vue 的版本：

1. 安装依赖包

npm install markdown-it mathjax
npm install --save-dev @types/markdown-it

2. 在 `src/utils/mathjax.js` 文件中配置 MathJax

window.MathJax = {
    tex: {
        inlineMath: [
            ["$", "$"],
            ["\\(", "\\)"],
            ["\(", "\)"],
        ], // 行内公式选择符
        displayMath: [
            ["$$", "$$"],
            ["\\[", "\\]"],
        ], // 段内公式选择符
    },
    startup: {
        ready() {
            MathJax.startup.defaultReady();
        },
    },
};

3. 在 `main.ts` 中导入 MathJax

import "@/utils/mathjax";
import "mathjax/es5/tex-svg";

4. 页面代码

<template>
  <div>
    <!-- 输入框，用于实时更新Markdown文本 -->
    <textarea v-model="text" rows="10" cols="50" placeholder="输入Markdown内容"></textarea>

    <!-- 显示渲染的Markdown内容 -->
    <div style="width: 500px; overflow: auto; margin-top: 20px;">
      <div v-html="renderedMarkdown"></div>
    </div>
  </div>
</template>

<script setup="" lang="ts">
import { ref, computed } from "vue";
import MarkdownIt from 'markdown-it';

// Markdown 内容
const text = ref<string>("");

const mdi = new MarkdownIt({
  html: false,
  linkify: true,
});

// 处理并渲染Markdown内容
const renderedMarkdown = computed<string>(() => {
  window.MathJax.startup.defaultReady();
  return mdi.render(text.value);
});
</script>

<style scoped="">
textarea {
  width: 500px;
  height: 200px;
}
</style>

代码说明：

TypeScript 类型定义：
- text 使用了 ref<string> 来明确它是一个字符串类型的响应式变量。
- renderedMarkdown 使用了 computed<string> 来明确它是一个字符串类型的计算属性。
MarkdownIt 类型：
- 通过 npm install --save-dev @types/markdown-it 安装了 markdown-it 的类型定义，确保 TypeScript 能够正确识别 MarkdownIt 的类型。
MathJax 配置：
- window.MathJax 的配置保持不变，确保 MathJax 能够正确渲染数学公式。
样式：
- 样式部分保持不变，确保页面布局和输入框的样式符合预期。

总结：

通过将代码转换为 TypeScript，我们增加了类型安全性，确保在开发过程中能够捕获潜在的类型错误。同时，TypeScript 的类型推断和自动补全功能也能提高开发效率。