Vue Markdown Next

Appearance

Get Started ​

What is this? ​

This package is a Vue component that can be given a string of markdown that it’ll safely render to Vue elements.

You can pass plugins to change how markdown is transformed and pass components that will be used instead of normal HTML elements.

TIP

This package was inspired by react-markdown, and the implementation ideas can be referenced from the GitHub.

Installation ​

sh
npm install -D vue-markdown-next

Usage Example ​

vue
<template>
  <Markdown :content="testContent" :remark-plugins="[remarkGfm]"> </Markdown>
</template>

<script setup>
import { Markdown } from 'vue-markdown-next';
import remarkGfm from 'remark-gfm';

const testContent = `
The point of reference-style links is not that they’re easier to write. The point is that with reference-style links, your document source is vastly more readable. Compare the above examples: using reference-style links, the paragraph itself is only 81 characters long; with inline-style links, it’s 176 characters; and as raw \`HTML\`, it’s 234 characters. In the raw \`HTML\`, there’s more markup than there is text.

---

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.

---

an example | *an example* | **an example**

---

1. Bird
1. McHale
1. Parish
    1. Bird
    1. McHale
        1. Parish

---

- Red
- Green
- Blue
    - Red
    - Green
        - Blue

---

This is [an example](http://example.com/ "Title") inline link.

<http://example.com/>


| title | title | title |
| --- | --- | --- |
| content | content | content |


\`\`\`bash
$ pnpm install
\`\`\`

`;
</script>