A Vue 3 markdown-it wrapper plugin.
npm install vue3-markdown-it
<ins>
tagsimport { createApp } from 'vue';
import VueMarkdownIt from 'vue3-markdown-it';
const app = createApp();
app.use(VueMarkdownIt);
If you want to use LaTeX, you’ll have to import a CSS file from markdown-it-latex.
import 'markdown-it-latex/dist/index.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';
<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>
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
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
Author: JanGuillermo
Demo: https://janguillermo.github.io/vue3-markdown-it/
Source Code: https://github.com/JanGuillermo/vue3-markdown-it
#vuejs #vue #javascript