vue3集成markdown

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

解析markdown字符串

vue3-markdown-it

LiveDemo

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

支持:

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

安装

npm install vue3-markdown-it --save

在你的页面中引入即可:



代码高亮

安装highlight.js

npm install highlight.js --save

导入highlight的样式文件:



这是如果内容中包含代码块,就会渲染出类似下面的效果:
vue3集成markdown_第1张图片

可以到下面的地址去查看所有支持的主题:
https://github.com/highlightj...

你可能感兴趣的:(vue3集成markdown)