markdown-it-vue: markdown-it-vue 是一个丰富的 markdown Vue 组件，markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎，整合多种 markdown-it 插件，并内置了一些自己的功能性插件，支持 GFM TOC、GFM style、emoji等通用特性，还支持 mermaid charts、Echarts、flowchart.js 等多种图表，支持 AsciiMath、Latex 等数学公式

[](#markdown-it-vue)markdown-it-vue

Build Status

Markdown Vue 组件库.

markdown-it-vue 是一个丰富的 markdown Vue 组件，markdown-it-vue 使用 markdown-it 作为 Markdown 数据解析引擎，整合多种 markdown-it 插件，并内置了一些自己的功能性插件，支持 GFM TOC、GFM style、emoji 等通用特性，还支持 mermaid charts、Echarts、flowchart.js 等多种图表，支持 AsciiMath、Latex 等数学公式渲染，支持 errro | warning | info 个性化提示。

[](#%E5%9C%A8%E7%BA%BF%E7%A4%BA%E4%BE%8B)在线示例

http://www.aqcoder.com/markdown

由于众所周知的原因，可能需要 fan qiang。

[](#%E5%AE%89%E8%A3%85)安装

npm install markdown-it-vue

[](#%E7%89%B9%E6%80%A7)特性

  • 图片大小控制及图片预览
  • Official markdown syntax.
  • GFM TOC
  • GFM style
  • emoji
  • mermaid charts
  • Echarts
  • Flowcharts.js
  • Subscript/Superscript
  • AsciiMath
  • info | error | warning message tip

[](#%E4%BD%BF%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6)使用的插件

  • markdown-it
  • markdown-it-emoji
  • markdown-it-sub
  • markdown-it-sup
  • markdown-it-footnote
  • markdown-it-deflist
  • markdown-it-abbr
  • markdown-it-ins
  • markdown-it-mark
  • markdown-it-katex
  • markdown-it-task-lists
  • markdown-it-icons
  • markdown-it-highlight
  • markdown-it-latex
  • markdown-it-container
  • markdown-it-github-toc
  • markdown-it-source-map
  • markdown-it-link-attributes

内置插件：

  • markdown-it-image
  • markdown-it-font-awsome
  • markdown-it-link-attributes
  • markdown-it-highlight
  • markdown-it-plugin-echarts
  • markdown-it-plugin-mermaid
  • markdown-it-plugin-flowchart

[](#markdown-it-%E5%8F%8A%E4%B8%AA%E6%8F%92%E4%BB%B6%E9%80%89%E9%A1%B9)markdown-it 及个插件选项

使用 options 指定 markdow-it 和个插件的选项。

<markdown-it-vue class="md-body" :content="content" :options="options" />

options: {
markdownIt: {
linkify: true
},
linkAttributes: {
attrs: {
target: '_blank',
rel: 'noopener'
}
}
}

更多 markdown-it 选项见官方文档：https://markdown-it.github.io/markdown-it/。

插件默认选项如下：

{
linkAttributes: {
attrs: {
target: '_blank',
rel: 'noopener'
}
},
katex: {
throwOnError: false,
errorColor: '#cc0000'
},
icons: 'font-awesome',
githubToc: {
tocFirstLevel: 2,
tocLastLevel: 3,
tocClassName: 'toc',
anchorLinkSymbol: '',
anchorLinkSpace: false,
anchorClassName: 'anchor',
anchorLinkSymbolClassName: 'octicon octicon-link'
},
mermaid: {
theme: 'default'
},
image: {
hAlign: 'left',
viewer: true
}
}

个插件详细说明见个插件官方文档。

[](#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8F%92%E4%BB%B6)自定义插件

it can add your plugin to markdown-it-vue by the use method.

this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)

[](#%E6%94%AF%E6%8C%81%E9%AB%98%E4%BA%AE%E7%9A%84%E8%AF%AD%E8%A8%80)支持高亮的语言

语言高亮使用 hilight.js 打包过大，因此只引用了常用的语言。

如果这里没有你需要的语言，欢迎提 PR。

  • html
  • json
  • css
  • shell
  • bash
  • C
  • Java
  • Python
  • C++
  • C#
  • PHP
  • SQL
  • R
  • Swift
  • Go
  • MATLAB
  • Ruby
  • Perl
  • Objective-C
  • Rust
  • Dart
  • Delphi
  • D
  • Kotlin
  • Scala
  • SAS
  • Lisp
  • Lua
  • Ada
  • Fortran
  • PowerShell
  • VBScript
  • VBscript-html
  • Groovy
  • Julia
  • Julia-repl
  • LabVIEW
  • Haskell
  • ActionScript
  • Scheme
  • TypeScript
  • F#
  • Prolog
  • Erlang

[](#%E5%9B%BE%E7%89%87%E5%A4%A7%E5%B0%8F%E6%8E%A7%E5%88%B6%E8%AF%AD%E6%B3%95)图片大小控制语法

![image size](https://http://www.aqcoder.com/ravenq-qr.png =50x50)
![image size](https://http://www.aqcoder.com/ravenq-qr.png =x50)
![image size](https://http://www.aqcoder.com/ravenq-qr.png =50x)

[](#%E5%85%B3%E4%BA%8E-echarts)关于 echarts

为了减少包的大小，只引用 echarts.simple。

[](#%E7%B2%BE%E7%AE%80%E7%89%88-markdown-it-vue-light)精简版 markdown-it-vue-light

https://github.com/ravenq/markdown-it-vue/issues/24

为了进一步缩小打包的大小，移除了 mermaid chart。这包直接引用了整个 lodash, 他本身也很大。

如果平时用不到的话，就用精简版吧。

[](#%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B)使用示例

<template>
<div>
<markdown-it-vue class="md-body" :content="content" />
</div>
</template>
<script>
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
export default {
components: {
MarkdownItVue
},
data() {
return {
content: '# your markdown content'
}
}
}
</script>

使用精简版

<template>
<div>
<markdown-it-vue-light class="md-body" :content="content" />
</div>
</template>
<script>
import MarkdownItVueLight from 'markdown-it-vue/dist/markdown-it-vue-light.umd.min.js'
import 'markdown-it-vue/dist/markdown-it-vue-light.css'
export default {
components: {
MarkdownItVueLight
},
data() {
return {
content: '# your markdown content'
}
}
}
</script>

[](#%E7%A4%BA%E4%BE%8B%E6%88%AA%E5%9B%BE)示例截图

markdown-it-vue

[](#license)License

MIT

原网址: 访问
创建于: 2021-06-17 11:18:34
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论