Please go to vite-plugin-vue-markdown or find another alternative.
An awesome Vue 3 markdown-it wrapper plugin that can even support external plugins!
npm install vue3-markdown-it
<ins>
tagsimport { createApp } from 'vue';
import Markdown from 'vue3-markdown-it';
const app = createApp();
app.use(Markdown);
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>
<Markdown :source="source" />
</div>
</template>
<script>
import Markdown from 'vue3-markdown-it';
export default {
components: {
Markdown
},
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
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>
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