vite-plugin-vue-marked
This plugin allows you to use markdown
blocks in your Vue SFC with Vite
Install
Install the pacakge
npm install -D @7nohe/vite-plugin-vue-marked
Add to your vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueMarked from "@7nohe/vite-plugin-vue-marked";
export default defineConfig({
plugins: [vue(), vueMarked()],
});
Usage
<!-- Example.vue -->
<script setup lang="ts">
import VMarked from 'vmarked';
</script>
<template>
<VMarked />
</template>
<markdown>
# Heading 1
## Heading 2
### Heading 3
</markdown>
You can use marked options to customize the generated HTML code.
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import vueMarked from "@7nohe/vite-plugin-vue-marked";
import hljs from "highlight.js";
const renderer = {
heading(text, level) {
const escapedText = text.toLowerCase().replace(/[^\w]+/g, "-");
return `
<h${level}>
<a name="${escapedText}" class="anchor" href="#${escapedText}">
<span class="header-link"></span>
</a>
${text}
</h${level}>`;
},
};
export default defineConfig({
plugins: [
vue(),
vueMarked({
options: {
highlight: function (code, lang) {
const language = hljs.getLanguage(lang) ? lang : "plaintext";
return hljs.highlight(code, { language }).value;
},
},
extensions: [{ renderer }],
}),
],
});
An example app is available in the /examples/vue-app
directory.
Options
name | type | describe |
---|---|---|
options | MarkedOptions | marked's setOptions config |
extensions | MarkedExtension[] | marked's marked.use(extension) |
mermaid | mermaidAPI.Config | Mermaid API Configuration |
License
MIT