vue-markdown-render - GitLite

KO | EN

gitlite — search

#javascript #python #golang #machine-learning #rust #deep-learning #linux #docker #nodejs #java #kubernetes #awesome-list #vue #open-source

vue-markdown-render

(★ 138)

A simple markdown parser for Vue using markdown-it.

File Explorer

Download Latest Version (.zip)

- - test.yml
- VueMarkdown.d.ts
- VueMarkdown.js
- VueMarkdown.js.map
- - favicon.ico
- - App.vue
  - env.d.ts
  - main.ts
- .gitignore
- index.html
- package.json
- pnpm-lock.yaml
- pnpm-workspace.yaml
- README.md
- tsconfig.json
- vite.config.ts
- vitest.config.ts
- VueMarkdown.ts
.gitignore
LICENSE.md
package.json
pnpm-lock.yaml
README.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/cloudacy/vue-markdown-render

Downloads the entire project code from GitHub to your computer.

cd vue-markdown-render

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install @types/markdown-it --save-dev

Downloads and installs the libraries listed in package.json.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-markdown-render

`vue-markdown-render` is a simple and lightweight wrapper for [markdown-it](https://markdown-it.github.io/) with full TypeScript support.

## Usage

```vue
<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](https://github.com/markdown-it/markdown-it#init-with-presets-and-options) can be passed as an object into the VueMarkdown component:

```vue
 <vue-markdown :source="src" :options="options" />
```

### Plugins

[markdown-it](https://github.com/markdown-it/markdown-it#plugins-load) compatible simple plugins can be passed as an array into the VueMarkdown component. Example using [MarkdownItAnchor](https://www.npmjs.com/package/markdown-it-anchor)
```vue
<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](https://www.npmjs.com/package/@types/markdown-it) to your **dev dependencies**.

```bash
npm install @types/markdown-it --save-dev
```