关于vue3:vue3集成markdown

36次阅读

共计 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…

正文完
 0