# โจ vue3-markdown-it โจ
[](https://www.npmjs.com/package/vue3-markdown-it) [](https://travis-ci.com/JanGuillermo/vue3-markdown-it) [](https://codecov.io/gh/JanGuillermo/vue3-markdown-it) [](https://david-dm.org/JanGuillermo/vue3-markdown-it) [](https://snyk.io/test/github/JanGuillermo/vue3-markdown-it?targetFile=package.json) [](https://www.npmjs.com/package/vue3-markdown-it)
> An awesome Vue 3 [markdown-it](https://github.com/markdown-it/markdown-it) wrapper plugin that can even support external plugins!
๐ [Live Demo](https://janguillermo.github.io/vue3-markdown-it/)
---
## Installation
```
npm install vue3-markdown-it
```
## Supported Plugins
- [markdown-it](https://github.com/markdown-it/markdown-it) - __The one__ that started it all
- [markdown-it-abbr](https://github.com/markdown-it/markdown-it-abbr) - Add abbreviations
- [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) - Add anchors
- [markdown-it-deflist](https://github.com/markdown-it/markdown-it-deflist) - Add definition lists
- [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) - Add emojis
- [markdown-it-footnote](https://github.com/markdown-it/markdown-it-footnote) - Add footnotes
- [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) - Add highlighting for code blocks
- [markdown-it-ins](https://github.com/markdown-it/markdown-it-ins) - Add `` tags
- [markdown-it-mark](https://github.com/markdown-it/markdown-it-mark) - Add marking/highlighting
- [markdown-it-sub](https://github.com/markdown-it/markdown-it-sub) - Add subscript
- [markdown-it-sup](https://github.com/markdown-it/markdown-it-sup) - Add superscript
- [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) - Add task lists
- [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) - Add table of contents
## Usage
### Global Use
```js
import { createApp } from 'vue';
import Markdown from 'vue3-markdown-it';
const app = createApp();
app.use(Markdown);
```
### CSS
If you want to use highlighting for code blocks, you'll have to import a CSS file from [highlight.js](https://github.com/highlightjs/highlight.js). View more styles [here](https://github.com/highlightjs/highlight.js/tree/master/src/styles). The code sample below imports the Monokai styling.
```js
import 'highlight.js/styles/monokai.css';
```
### Single Use
```vue
```
## Props
The following properties are supported:
### `anchor`
> View [markdown-it-anchor](https://github.com/valeriangalliat/markdown-it-anchor) for more information.
Type: `Object` | Default value: `null`
### `breaks`
> Convert `\n` in paragraphs into `
`.
Type: `Boolean` | Default value: `false`
### `emoji`
> View [markdown-it-emoji](https://github.com/markdown-it/markdown-it-emoji) for more information.
Type: `Object` | Default value: `null`
### `highlight`
> View [markdown-it-highlightjs](https://github.com/valeriangalliat/markdown-it-highlightjs) for more information.
Type: `Object` | Default value: `null`
### `html`
> Enable HTML tags in source.
Type: `Boolean` | Default value: `false`
### `langPrefix`
> CSS language prefix for fenced blocks. Can be useful for external highlighters.
Type: `String` | Default value: `language-`
### `linkify`
> Autoconvert URL-like text to links
Type: `Boolean` | Default value: `false`
### `plugins` ๐
> Don't see your favorite markdown-it plugin in the list of supported plugins? You can create an array of plugins and bind it into the component!
> > The array only consists of objects (plugins in that case). A plugin has two properties:
> > - `plugin`: A `markdown-it` plugin imported into this
> > - `options`: Set the options for a specific `markdown-it` plugin.
> ```vue
>
>
>
>
>
>
>
> ```
Type: `Array` | Default value: `[]`
### `quotes`
> Double + single quotes replacement pairs, when typographer enabled and smartquotes on. Could be either a String or an Array. *For example*, you can use `ยซยปโโ` for Russian, `โโโโ` for German, and `['ยซ\xA0', '\xA0ยป', 'โน\xA0', '\xA0โบ']` for French (including nbsp).
Type: `String | String[]` | Default value: `โโโโ`
### `source`
> Content to be rendered into markdown.
Type: `String` | Default value: `null`
### `tasklists`
> View [markdown-it-task-lists](https://github.com/revin/markdown-it-task-lists) for more information.
Type: `Object` | Default value: `null`
### `toc`
> View [markdown-it-toc-done-right](https://github.com/nagaozen/markdown-it-toc-done-right) for more information.
Type: `Object` | Default value: `null`
### `typographer`
> Enable some language-neutral replacement + quotes beautification.
Type: `Boolean` | Default value: `false`
### `xhtmlOut`
> Use `/` to close single tags (`
`).
Type: `Boolean` | Default value: `false`
## License
[MIT](https://github.com/JanGuillermo/vue3-markdown-it/blob/master/LICENSE)