💖 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 = // 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 = `<render-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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- 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