Package Exports
- vue3-markdown-it
- vue3-markdown-it/dist/vue3-markdown-it.umd.min.js
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-markdown-it) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
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