vue markdown_Markdown的Vue库

vue markdown

降价促销 (markdown-it-vue)

The vue lib for markdown-it.

markdown-it的Vue库。

View Demo 查看演示 View Github 查看Github

安装 (Install)

npm install markdown-it-vue

支持 (Supports)

• Official markdown syntax.

  官方降价语法。

• GFM TOC

  GFM目录

• GFM style

  GFM风格

• emoji

  表情符号

• mermaid charts

  美人鱼图

• Echarts

  图表

• Flowcharts.js

  Flowcharts.js

• Subscript/Superscript

  下标/上标

• AsciiMath

  AsciiMath

• info | error | warning message tip

  信息| 错误 警告信息提示

插件清单 (Plugin list)

• markdown-it

  降价

• markdown-it-emoji

  降价表情符号

• markdown-it-sub

  降价促销

• markdown-it-sup

  降价促销

• markdown-it-footnote

  脚注降价

• markdown-it-deflist

  markdown-it-deflist

• markdown-it-abbr

  markdown-it-abbr

• markdown-it-ins

  降价促销

• markdown-it-mark

  降价标记

• markdown-it-katex

  降价促销

• markdown-it-task-lists

  markdown-it-task-lists

• markdown-it-icons

  降价图标

• markdown-it-highlight

  降价突出

• markdown-it-latex

  降价乳胶

• markdown-it-container

  降价容器

• markdown-it-github-toc

  markdown-it-github-toc

• markdown-it-source-map

  markdown-it-source-map

• markdown-it-link-attributes

  markdown-it-link-属性

internal plugin list:

内部插件列表：

• markdown-it-plugin-echarts

  markdown-it-plugin-echarts

• markdown-it-plugin-mermaid

  降价插件美人鱼

• markdown-it-plugin-flowchart

  markdown-it-plugin-流程图

选件 (Options)

use options property to sepcial the options of markdow-it and markdown-it-plugins.

使用options属性来分隔markdow-it和markdown-it-plugins的选项。

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

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

more markdown-it options see https://markdown-it.github.io/markdown-it/.

更多markdown-it选项，请参阅https://markdown-it.github.io/markdown-it/ 。

amd default plugins options:

amd默认插件选项：

{
  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'
  }
}

更多插件 (More plugins)

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

它可以通过use方法将您的插件添加到markdown-it-vue中。

this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)

用法 (Usage)

<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>

翻译自: https://vuejsexamples.com/the-vue-lib-for-markdown-it/

vue markdown