vmark v1.2.0
💖 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:
```js {insert: 'below'}
<button>Button</button>
```
Into:
```js
<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
- 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