https://github.com/hojas/vue-markdown-viewer

🇲 Markdown component for Vue 3. 用于渲染 Markdown 的 Vue 3 组件。
https://github.com/hojas/vue-markdown-viewer

markdown remark vue

Last synced: 28 days ago
JSON representation

🇲 Markdown component for Vue 3. 用于渲染 Markdown 的 Vue 3 组件。

• Host: GitHub
• URL: https://github.com/hojas/vue-markdown-viewer
• Owner: hojas
• License: mit
• Created: 2022-09-15T09:26:13.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-11-23T23:17:54.000Z (about 1 month ago)
• Last Synced: 2024-11-23T23:19:51.365Z (about 1 month ago)
• Topics: markdown, remark, vue
• Language: Vue
• Homepage: https://hojas.github.io/vue-markdown-viewer/
• Size: 381 KB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-markdown-viewer

![npm](https://img.shields.io/npm/v/vue-markdown-viewer)

![npm](https://img.shields.io/npm/dm/vue-markdown-viewer)

Vue component to render markdown with [remark](https://github.com/remarkjs/remark).

## Install

```shell

$ npm install vue-markdown-viewer

```

## Use

```vue

import { ref } from 'vue'

import { VueMarkdownRender } from 'vue-markdown-viewer'

const md = ref('## hi')

  {{ md }}

```

Use a plugin to support gfm:

```vue

import { ref } from 'vue'

import { VueMarkdownRender } from 'vue-markdown-viewer'

import remarkGfm from 'remark-gfm'

const md = ref('## hi')

  

    {{ md }}

  

```

Use a plugin to support syntax highlight:

````vue

import { ref } from 'vue'

import { VueMarkdownRender } from 'vue-markdown-viewer'

import rehypeHighlight from 'rehype-highlight'

const md = ref(`

## Highlight

```js

console.log("hi")

```

`)

  

    {{ md }}

  

````

## Options

- `content`: `string` \

  markdown string

- `components`: `Record` \

  object mapping tag names to Vue components

- `remarkRehypeOptions`: `Record` \

  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](https://github.com/remarkjs/react-markdown)