Skip to content
Convert markdown to Vue component.
JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib
test
.editorconfig
.gitattributes
.gitignore
LICENSE
README.md
circle.yml
package.json
yarn.lock

README.md

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

vmark

NPM version NPM downloads CircleCI donate chat

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

You can’t perform that action at this time.