# markdown-it-vue

> The vue lib for markdown-it

Latest version **1.1.7** (published 2022-03-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install markdown-it-vue
pnpm add markdown-it-vue
yarn add markdown-it-vue
bun add markdown-it-vue
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.7 |
| Published | 2022-03-23 |
| First published | 2018-08-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 24 |
| Unpacked size | 53 MB |
| Known vulnerabilities | 0 (+11 in 4 direct dependencies) |
| Install scripts | no |
| GitHub stars | 372 |
| Author | ravenq |
| Maintainers | ravenq |
| Keywords | markdown, markdown-it, markdown-it-plugin, vue, markdown-it-vue |

## Links

- npm: https://www.npmjs.com/package/markdown-it-vue
- Repository: https://github.com/ravenq/markdown-it-vue
- Issues: https://github.com/ravenq/markdown-it-vueissues
- npm.io page: https://npm.io/package/markdown-it-vue

## Dependencies (24)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [echarts](https://npm.io/package/echarts.md) ^5.1.0
- [mermaid](https://npm.io/package/mermaid.md) ^8.9.2
- [markdown-it](https://npm.io/package/markdown-it.md) ^12.0.6
- [flowchart.js](https://npm.io/package/flowchart.js.md) ^1.15.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^10.7.2
- [markdown-it-ins](https://npm.io/package/markdown-it-ins.md) ^3.0.1
- [markdown-it-sub](https://npm.io/package/markdown-it-sub.md) ^1.0.0
- [markdown-it-sup](https://npm.io/package/markdown-it-sup.md) ^1.0.0
- [markdown-it-abbr](https://npm.io/package/markdown-it-abbr.md) ^1.0.4
- [markdown-it-mark](https://npm.io/package/markdown-it-mark.md) ^3.0.1
- [markdown-it-emoji](https://npm.io/package/markdown-it-emoji.md) ^2.0.0
- [markdown-it-latex](https://npm.io/package/markdown-it-latex.md) ^0.2.0
- [markdown-it-regex](https://npm.io/package/markdown-it-regex.md) ^0.2.0
- [github-markdown-css](https://npm.io/package/github-markdown-css.md) ^4.0.0
- [markdown-it-deflist](https://npm.io/package/markdown-it-deflist.md) ^2.1.0
- [markdown-it-footnote](https://npm.io/package/markdown-it-footnote.md) ^3.0.2
- [markdown-it-container](https://npm.io/package/markdown-it-container.md) ^3.0.0
- [markdown-it-github-toc](https://npm.io/package/markdown-it-github-toc.md) ^3.2.4
- [markdown-it-source-map](https://npm.io/package/markdown-it-source-map.md) ^0.1.1
- [markdown-it-task-lists](https://npm.io/package/markdown-it-task-lists.md) ^2.1.1
- [font-awesome-icon-chars](https://npm.io/package/font-awesome-icon-chars.md) ^2.6.0
- [markdown-it-toc-and-anchor](https://npm.io/package/markdown-it-toc-and-anchor.md) ^4.2.0
- [@iktakahiro/markdown-it-katex](https://npm.io/package/@iktakahiro/markdown-it-katex.md) ^4.0.1

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 1.1.7 (latest) — 2022-03-23
- 1.1.6 — 2020-12-21
- 1.1.5 — 2020-11-20
- 1.1.4 — 2020-10-02
- 1.1.3 — 2020-07-24
- 1.1.2 — 2020-06-09
- 1.1.1 — 2020-06-07
- 1.1.0 — 2020-05-31
- 1.0.11 — 2019-12-01
- 1.0.10 — 2019-09-19
- 1.0.9 — 2019-06-06
- 1.0.8 — 2019-05-12
- 1.0.6 — 2019-01-24
- 1.0.5 — 2018-09-02
- 1.0.4 — 2018-08-29
- … 2 more at https://npm.io/package/markdown-it-vue/versions

## README

# markdown-it-vue

[![Build Status](https://travis-ci.org/ravenq/markdown-it-vue.svg?branch=master)](https://travis-ci.org/ravenq/markdown-it-vue)

> The vue lib for markdown-it.

## Demo online

[http://www.aqcoder.com/markdown](http://www.aqcoder.com/markdown)

## Install

```sh
npm install markdown-it-vue
```
## Running Demo
```bash
yarn install && yarn dev
```
open http://localhost:8080/

## Supports

- Image size and Viewer
- Official markdown syntax.
- GFM TOC
- GFM style
- emoji
- [mermaid charts](http://knsv.github.io/mermaid/)
- [Echarts](http://echarts.baidu.com) **simple only**
- Flowcharts.js
- Subscript/Superscript
- [AsciiMath](http://asciimath.org/)
- 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-abbr
- markdown-it-ins
- markdown-it-mark
- markdown-it-katex
- markdown-it-task-lists
- markdown-it-highlight
- markdown-it-latex
- markdown-it-container
- markdown-it-github-toc
- markdown-it-source-map
- markdown-it-link-attributes

internal plugin list:

- 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

## Options

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

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

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

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

amd default plugins options:

```js
{
  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
  }
}
```

## More plugins

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

```js
this.$refs.myMarkdownItVue.use(MyMarkdownItPlugin)
```

## support hilight lang

PR for you lang wich you want.

- 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

## image size

```md
![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)
```

## about echarts

use echarts.simple to reduce the bundle size.

## markdown-it-vue-light

markdown-it-vue-light remove the mermaid chart to reduce the bundle size.

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

for a small bundle size, it better to import the markdown-it-vue-light.

## Usage

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

the light model.

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

## ScreenShot

![markdown-it-vue](https://github.com/ravenq/markdown-it-vue/blob/master/doc/markdown-it-vue.png?raw=true)

## License

[MIT](https://github.com/ravenq/markdown-it-vue/blob/master/LICENSE)

---
_Source: https://npm.io/package/markdown-it-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._