Currently not being maintained.

Please go to vite-plugin-vue-markdown or find another alternative.

✨ vue3-markdown-it ✨

An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!

🔎 Live Demo

Installation

npm install vue3-markdown-it

Supported Plugins

markdown-it - The one that started it all
markdown-it-abbr - Add abbreviations
markdown-it-anchor - Add anchors
markdown-it-deflist - Add definition lists
markdown-it-emoji - Add emojis
markdown-it-footnote - Add footnotes
markdown-it-highlightjs - Add highlighting for code blocks
markdown-it-ins - Add <ins> tags
markdown-it-mark - Add marking/highlighting
markdown-it-sub - Add subscript
markdown-it-sup - Add superscript
markdown-it-task-lists - Add task lists
markdown-it-toc-done-right - Add table of contents

Usage

Global Use

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. View more styles here. The code sample below imports the Monokai styling.

import 'highlight.js/styles/monokai.css';

Single Use

<template>
  <div>
    <Markdown :source="source" />
  </div>
</template>

<script>
import Markdown from 'vue3-markdown-it';

export default {
  components: {
    Markdown
  },
  data() {
    return {
      source: '# Hello World!'
    }
  }
}
</script>

Props

The following properties are supported:

`anchor`

View markdown-it-anchor for more information.

Type: Object | Default value: null

`breaks`

Convert \n in paragraphs into <br>.

Type: Boolean | Default value: false

`emoji`

View markdown-it-emoji for more information.

Type: Object | Default value: null

`highlight`

View 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.
<template>
  <div>
    <Markdown :source="source" :plugins="plugins" />
  </div>
</template>

<script>
import MarkdownItStrikethroughAlt from 'markdown-it-strikethrough-alt';
import Markdown from 'vue3-markdown-it';

export default {
  components: {
    Markdown
  },
  data() {
    return {
      source: '--this is not so cool!--',
      plugins = [
        {
          plugin: MarkdownItStrikethroughAlt
        }
      ]
    }
  }
}
</script>

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 for more information.

Type: Object | Default value: null

`toc`

View 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 (<br />).

Type: Boolean | Default value: false

License

MIT

License

JanGuillermo/vue3-markdown-it

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 10

Uh oh!

Contributors 5

Uh oh!

Languages

Error
Looks like something went wrong!