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

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 选项，否则目录生成不会生效。

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

事件

在 vue-markdown 插件中，events 包含以下两个事件：

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

您可以通过在组件的 template 中添加 v-on:rendered 和 v-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