基于marked.js的Vue Markdown插件|vue-markdown

当前位置:主页 > Vue > Vue组件 > 基于marked.js的Vue Markdown插件|vue-markdown
基于marked.js的Vue Markdown插件|vue-markdown
分享:

    插件介绍

    vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器,可以方便地将 Markdown 文档解析为 HTML。

    浏览器兼容性

    浏览器兼容性
    时间:02-13
    阅读:
简要教程

vue-markdown 是一个基于 marked.js 的 Vue Markdown 插件。它是一个简单易用的 Markdown 解析器,可以方便地将 Markdown 文档解析为 HTML。它有如下特点:

  • 功能强大:支持 Markdown 语法的全部特性,例如标题、列表、链接等。
  • 易于使用:只需要在 Vue 组件中引入 vue-markdown 插件,并使用简单的模板语法即可实现 Markdown 的解析和渲染。
  • 高性能:基于 marked.js,性能优异,可以快速地解析和渲染大量的 Markdown 文档。
  • 扩展性强:支持自定义渲染规则,可以通过插件扩展功能,以满足更多的需求。
  • 如果您需要在 Vue 项目中使用 Markdown,可以考虑使用 vue-markdown 插件。它是一个简单易用的解决方案,可以让您快速地实现 Markdown 的解析和渲染。

使用方法

安装

安装插件:使用 npm或yarn 安装 vue-markdown 插件,命令如下:

npm install vue-markdown
yarn add vue-markdown --save
    
使用
// 1. 在 Vue 组件中引入插件:在组件中引入 vue-markdown 插件,代码如下:
import VueMarkdown from 'vue-markdown'

// 2. 注册组件:在组件中注册 vue-markdown 组件,代码如下
components: {
    'vue-markdown': VueMarkdown
}

// 3. 使用组件:在组件模板中使用 vue-markdown 组件,代码如下:
    	
    

其中,markdownText 是一个存储了 Markdown 文本的变量。

这是一个简单的使用 vue-markdown 插件的示例。您可以根据需求适当的扩展其功能,例如添加自定义渲染规则、使用插件扩展功能等。

例如,在组件中使用 vue-markdown 插件,可以在模板中添加 slots、props 和 events 的代码,如下:

    	
    

在 script 标签中,可以定义相应的数据、方法和事件处理器。

配置参数

以下是 vue-markdown 插件的 options 选项的详细列表

选项 默认值 描述
html false 是否允许解析 HTML 标签。
xhtml-out false 是否输出 XHTML 格式。
breaks false 是否将换行符解析为
标签。
lang-prefix language- 语法高亮语言前缀。
linkify false 是否将纯文本链接转换为链接。
typographer false 是否开启排版选项,例如引号转换、省略号转换等。
quotes "" 引用标记。
highlight 是否高亮代码块。 null
watches true 是否观察 source 数据的变化。
source 要转换为 HTML 的 Markdown 字符串。 空字符串
show 是否显示转换后的 HTML 内容。 true
emoji false 是否支持 emoji 表情。
table-class 'markdown-table' 表格的 CSS 类名。
task-lists false 是否支持任务列表。
anchor-attributes {} 锚点标签的属性。
prerender null 在转换 HTML 前的回调函数。
postrender null 在转换 HTML 后的回调函数。
toc false 是否生成目录。
toc-class 'markdown-toc' 目录的 CSS 类名。
toc-first-level 1 目录最顶层标题的级别,取值范围为 1-6。
toc-last-level 6 目录最后一层标题的级别,取值范围为 1-6。
toc-callback null 目录生成后的回调函数。
toc-anchor-link-symbol '#' 目录中的锚点链接的符号。
toc-anchor-link-space true 目录中的锚点链接前的空格。
tocAnchorLinkClass 'markdown-toc-anchor' 目录中的锚点链接的 CSS 类名。

注意:请确保开启了 html 选项,否则目录生成不会生效。

除了以上选项外,还可以添加其他 markdown-it 渲染选项,例如自定义标记、自定义插件等。详细信息请参考 markdown-it 官方文档。

事件

在 vue-markdown 插件中,events 包含以下两个事件:

  • rendered:在 Markdown 内容被渲染成 HTML 后触发的事件。
  • toc-rendered:在目录被渲染成 HTML 后触发的事件。

您可以通过在组件的 template 中添加 v-on:renderedv-on:toc-rendered 监听器来使用这两个事件。例如:

		
	

然后,您可以在组件的 script 部分中定义事件处理程序:

methods: {
  handleRendered() {
    console.log('Markdown has been rendered.');
  },
  handleTocRendered() {
    console.log('Table of Contents has been rendered.');
  }
}		
	

github网址:https://github.com/miaolz123/vue-markdown