hhy5277 / vmark

Convert markdown to Vue component.

💖 Using webpack? You may want vmark-loader ➡️

vmark

Install

yarn add vmark

Usage

Basically you can write Markdown code alongside <script> and <style> tags, and these tags work just like how it is in a normal .vue file.

In:

# Show off some counter

<counter :start="0" />

<script>
import counter from './counter.vue'
export default {
  components: {
    counter
  }
}
</script>

Out:

<template>
  <div class="vmark">
    <h1>Show off some counter</h1>
    <counter :start="0" />
  </div>
</template>

<script>
import counter from './counter.vue'
export default {
  components: {
    counter
  }
}
</script>

Code:

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

Insert code block

Automatically transform:

```vue {insert: 'below'}
<button>Button</button>
```

Into:

```vue
<button>Button</button>
```

<button>Button</button>

insert can also be above.

API

vmark(input, [options])

input

Type: string
Required: true

Input markdown string.

options

options.markdown

Options for markdown-it.

options.extend

• Type: (md: MarkdownIt) => void

A function whose first argument is the MarkdownIt instance.

options.wrapHTML

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

Wrap the HTML in an element, because the <template> block in Vue SFC doesn't allow multiple root elements. You can use this option to wrap HTML inside a Vue component:

const wrapHTML = html => `<render-html>${html}</render-html>`

Then inside the <render-html> component, you can access the html like this:

<template>
  <div class="content">
    <!-- `html` is available as default slot -->
    <slot name="default"></slot>
  </div>
</template>

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

vmark © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist · GitHub @egoist · Twitter @_egoistlily