共计 777 个字符,预计需要花费 2 分钟才能阅读完成。
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…
正文完