Package Exports
- vue3-markdown-it
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
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