💖 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:

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

`insert` can also be `above`.

## API

### vmark(input, [options])

#### input

Type: `string`<br>
Required: `true`

Input markdown string.

#### options

##### options.markdown

Options for [markdown-it](https://markdown-it.github.io/markdown-it/).

##### options.extend

- Type: `(md: MarkdownIt) => void`

A function whose first argument is the MarkdownIt instance.

##### options.wrapHTML

- Type: `(html: string) => string`
- Default: <code>html => &#x60;&lt;div class="vmark"&gt;${html}&lt;/div&gt;&#x60;</code>

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:

```js
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