vue-markdown-viewer v1.0.1

vue-markdown-viewer

Vue component to render markdown with remark.

Install

$ npm install vue-markdown-viewer

Use

<script lang="ts" setup>
import { ref } from 'vue'
import { VueMdRender } from 'vue-markdown-viewer'

const md = ref('## hi')
</script>

<template>
  <VueMdRender>{{ md }}</VueMdRender>
</template>

Use a plugin to support gfm:

<script lang="ts" setup>
import { ref } from 'vue'
import { VueMdRender } from 'vue-markdown-viewer'
import remarkGfm from 'remark-gfm'

const md = ref('## hi')
</script>

<template>
  <VueMdRender :remark-plugins="[remarkGfm]">
    {{ md }}
  </VueMdRender>
</template>

Use a plugin to support syntax highlight:

<script lang="ts" setup>
import { ref } from 'vue'
import { VueMdRender } from 'vue-markdown-viewer'
import rehypeHighlight from 'rehype-highlight'

const md = ref(`
## Highlight

\`\`\`js
console.log("hi")
\`\`\`
`)
</script>

<template>
  <VueMdRender :rehype-plugins="[rehypeHighlight]">
    {{ md }}
  </VueMdRender>
</template>

Options

• content: string \ markdown string
• components: Record<string, Component> \ object mapping tag names to Vue components
• remarkRehypeOptions: Record<string, any> \ Options of remark-rehype
• remarkPlugins: Array \ list of remark plugins to use
• rehypePlugins: Array \ list of rehype plugins to use
• className: string \ wrap the markdown in a div with this class name
• skipHtml: boolean, default: false \ ignore HTML in markdown completely
• linkTarget: string \ target to use on links

Related

• react-markdown