关于vue3: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/highlightj…