vue3-markdown-it
v1.0.10
Published
An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!
Downloads
30,948
Maintainers
Readme
✨ vue3-markdown-it ✨
An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!
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
: Amarkdown-it
plugin imported into thisoptions
: Set the options for a specificmarkdown-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