vue3集成markdown

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>

这是如果内容中包含代码块，就会渲染出类似下面的效果：

可以到下面的地址去查看所有支持的主题：
https://github.com/highlightjs/highlight.js/tree/main/src/styles