vue3集成markdown

最新推荐文章于 2025-02-01 18:49:36 发布

IICOOM

最新推荐文章于 2025-02-01 18:49:36 发布

阅读量2.2k

点赞数 2

分类专栏： Web开发文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/IICOOM/article/details/126398391

版权

Web开发专栏收录该内容

47 篇文章

订阅专栏

本文介绍了如何在Vue3项目中利用vue3-markdown-it方便地解析Markdown文本，包括锚点定位、代码块高亮、HTML标签支持和TOC等。通过简单示例展示了如何实现在项目中轻松应用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Markdown 语法简洁，并且对于图片，图表、数学式都有支持，许多博客网站都广泛使用 Markdown 来撰写文章。

解析markdown字符串

vue3-markdown-it

LiveDemo

上边的这个NPM package可以很方便的集成到vue3的项目中，用来解析Markdown文本。

支持：

锚点定位
换行
emoji
代码块语法高亮
html标签
toc
…

安装

npm install vue3-markdown-it --save

在你的页面中引入即可：

<template>
  <div>
    <Markdown :source="source" />
  </div>
</template>

<script>
import Markdown from 'vue3-markdown-it';

export default {
  components: {
    Markdown
  },
  data() {
    return {
      source: '# Hello World!'
    }
  }
}
</script>

代码高亮

安装highlight.js

npm install highlight.js --save

导入highlight的样式文件：

<template>
  <div>
    <Markdown :source="source" />
  </div>
</template>

<script>
import Markdown from 'vue3-markdown-it';
import 'highlight.js/styles/a11y-dark.css';

export default {
  components: {
    Markdown
  },
  data() {
    return {
      source: '# Hello World!'
    }
  }
}
</script>

这是如果内容中包含代码块，就会渲染出类似下面的效果：
在这里插入图片描述