💖 Using webpack? You may want vmark-loader ➡️
yarn add vmarkBasically 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 formatAutomatically transform:
```vue {insert: 'below'}
<button>Button</button>
```Into:
```vue
<button>Button</button>
```
<button>Button</button>insert can also be above.
Type: string
Required: true
Input markdown string.
Options for markdown-it.
- Type:
(md: MarkdownIt) => void
A function whose first argument is the MarkdownIt instance.
- 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>- 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
vmark © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).
github.com/egoist · GitHub @egoist · Twitter @_egoistlily
