网页渲染 Markdown 和 Latex

最新推荐文章于 2026-04-22 08:50:50 发布

原创最新推荐文章于 2026-04-22 08:50:50 发布 · 408 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #vue.js

收录于

该文章已生成可运行项目，

方案：markdown-it + markdown-it-katex

注意这里的markdown-it-katex需要用 vscode 维护的版本
在这里插入图片描述

第一步：下载依赖

npm install markdown-it

npm install @vscode/markdown-it-katex

第二步：引入样式文件

我这里是 vue 项目，就在 public/index.html中的 head 标签引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.4/dist/katex.min.css"/>

第三步：使用

我这里演示的在 vue 中使用，封装为一个组件。

<template>  
  <div v-html="renderedContent"></div>  
</template>  
  
  
<script>  
import MarkdownIt from "markdown-it";  
import markdownItKatex from "@vscode/markdown-it-katex";  
  
export default {  
  name: "MarkdownRenderer",  
  props: {  
    content: String  
  },  
  computed: {  
    renderedContent() {  
      const md = new MarkdownIt()  
      md.use(markdownItKatex)  
      return md.render(this.content);  
    }  
  }  
};  
</script>