2nthony / vuedown

📝Convert markdown to Vue-component, a vmark alternative

vuedown

📝Convert markdown to Vue-component

Please consider starring the project to show your ❤️ and support.

You can use the @evillt/vuedown-loader for webpack loader
You can use the parcel-plugin-vuedown for parcel plugin

vuedown is very similar to vmark, but with different tooling based on.

vuedown(8kb) is 4 times smaller than vmark(30kb), because vmark use saber-markdown(fork from markdown-it) while vuedown use marked(forked) under the hood.

Features

• Support @ in attribute names
• Convert link to <router-link> by default
• Support convert <a> to <router-link>
• Mini size

Install

yarn add vuedown --dev

Usage

In:

# {{ title }}

> I'm a markdown file

<button @click="inc">Count: {{ count }}</button>

<script>
  export default {
    data() {
      return {
        title: 'Hello',
        count: 0
      }
    },
    methods: {
      inc() {
        this.count++
      }
    }
  }
</script>

Out:

<template>
  <div class="vuedown">
    <h1>{{ title }}</h1>

    <p>
      <blockquote>I'm a markdown file</blockquote>
    </p>

    <p>
      <button @click="inc">Count: {{ count }}</button>
    </p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: 'Hello',
        count: 0
      }
    },
    methods: {
      inc() {
        this.count++
      }
    }
  }
</script>

Code:

const component = vuedown(input)
// Get the component in Vue SFC format

API

vuedown(input, [options])

input

• Type: string
• Required: true

The markdown string.

options

Options for marked.options.

options.routerLink

• Type: boolean
• Default: false

Convert <a> to <router-link> but external link will always be <a target="_blank">.

options.wrapHTML

• Type: (html: string) => string
• Default: html => `<div class="vuedown">${html}</div>`

Wrap the HTML in an element.

options.extendMarkedRenderer

• Type: (renderer: marked.Renderer) => void

You can modify the marked renderer we use.

options.imageLazyLoading

• Type: boolean

Support chrome 75's native image lazy loading.

vuedown.marked: marked

marked

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vuedown © evillt, Released under the MIT License.

Authored and maintained by EVILLT with help from contributors (list).

evila.me · GitHub @evillt · Twitter @evillt