项目地址： https://github.com/ravenq/markdown-it-vue



Markdonw 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 个性化提示。
在线示例
http://www.aqcoder.com/markdown
安装
npm install markdown-it-vue

特性

Official markdown syntax.
GFM TOC
GFM style
emoji
mermaid charts
Echarts
Flowcharts.js
Subscript/Superscript
AsciiMath
info | error | warning message tip

使用的插件

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

使用示例
<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>

示例截图

License
MIT

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

vue markdown
 vue-markdown编辑器 (vue-markdown-editor)
A markdown editor built on Vue.
 在Vue上构建的降价编辑器。 
View Demo
查看演示 View Github 
查看Github 
 安装 (Install)
# use npm
npm i @kangc/v-md-editor -S

# use yarn
yarn add @kangc/v-md-editor
 快速开始 (Quick Start)
import Vue from 'vue';
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';

VueMarkdownEditor.use(vuepressTheme);

Vue.use(VueMarkdownEditor);
 用法 (Usage)
<template>
  <v-md-editor v-model="text" height="400px"></v-md-editor>
</template>

<script>
  export default {
    data() {
      return {
        text: '',
      };
    },
  };
</script>
翻译自: https://vuejsexamples.com/markdown-editor-built-on-vue/
vue markdown

markdown高亮vue
 vue-markdown-highlight (vue-markdown-highlight)
Highlight.js syntax highlighter component for Vue.
 Vue的Highlight.js语法荧光笔组件。 
 安装 (Installation)
Via NPM:
 通过NPM： 

  

Install highlight.js:
 安装Highlight.js ： 

npm i highlight.js

Install vue-markdown-highlight:
 安装vue-markdown-highlight ： 

npm i vue-markdown-highlight -D
Or [Yarn]:
 或[纱线]： 

Install highlight.js:
 安装Highlight.js ： 

yarn add highlight.js

Install Vue Highlight.js:
 安装Vue Highlight.js ： 

yarn add vue-markdown-highlight
 用法 (Usage)
Main file:
 主文件： 
import 'highlight.js/styles/default.css';
import Highlight from 'vue-markdown-highlight'
Vue.use(Highlight)
Vue file:
 Vue文件： 
<template>
	 <div id="app">
      <div v-html="content" v-highlight></div>
  </div>
</template>

<script>
// JavaScript...
</script>

<style>
/* StyleSheet... */
</style>
翻译自: https://vuejsexamples.com/markdown-highlight-component-for-vue/
markdown高亮vue