关于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...