vue3-markdown-it

vue3-markdown-it

A Vue 3 markdown-it wrapper plugin.

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-latex - Add LaTeX formatting
• markdown-it-mark - Add marking/highlighting
• markdown-it-strikethrough-alt - Add strikethrough
• 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 VueMarkdownIt from 'vue3-markdown-it';

const app = createApp();

app.use(VueMarkdownIt);

CSS

import 'vue3-markdown-it/lib/vue3-markdown-it.css';

Single Use

<template>
  <div>
    <vue3-markdown-it :source='source' />
  </div>
</template>

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

export default {
  components: {
    VueMarkdownIt
  },
  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-

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

Changelog

[1.0.1] - 2020-09-14

Added

• Released vue3-markdown-it with support for 14 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-latex - Add LaTeX formatting
  • markdown-it-mark - Add marking/highlighting
  • markdown-it-strikethrough-alt - Add strikethrough
  • 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