vue-markdown-render
v2.2.1
Published
A simple, lightweight markdown-it wrapper for Vue written in pure typescript.
Downloads
144,179
Maintainers
Readme
vue-markdown-render
vue-markdown-render
is a simple and lightweight wrapper for markdown-it with full TypeScript support.
Usage
<template>
<div>
<vue-markdown :source="src" />
</div>
</template>
<script lang="ts">
import VueMarkdown from 'vue-markdown-render'
export default defineComponent({
name: 'MyComponent',
components: {
VueMarkdown
},
setup(props, ctx) {
const src = ref('# header')
return {
src
}
}
})
</script>
Options
markdown-it options can be passed as an object into the VueMarkdown component:
<vue-markdown :source="src" :options="options" />
Plugins
markdown-it compatible simple plugins can be passed as an array into the VueMarkdown component. Example using MarkdownItAnchor
<template>
<vue-markdown :source="markdown" :plugins="plugins" />
</template>
<script setup>
import VueMarkdown from 'vue-markdown-render'
import MarkdownItAnchor from 'markdown-it-anchor';
const plugins = [MarkdownItAnchor];
</script>
TypeScript
If you are using typescript, you have to add the @types/markdown-it to your dev dependencies.
npm install @types/markdown-it --save-dev