diff --git a/README.md b/README.md
index e468c6d..3c3cf43 100644
--- a/README.md
+++ b/README.md
@@ -83,6 +83,28 @@ Options for [markdown-it](https://markdown-it.github.io/markdown-it/).
A function whose first argument is the MarkdownIt instance.
+##### options.wrapHTML
+
+- Type: `(html: string) => string`
+- Default: html => `${html}
`
+
+Wrap the HTML in an element, because the `` 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 => `${html}`
+```
+
+Then inside the `` component, you can access the `html` like this:
+
+```vue
+
+
+
+
+
+
+```
+
## Contributing
1. Fork it!
diff --git a/lib/index.js b/lib/index.js
index 2624bd4..cc9ee61 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -1,11 +1,14 @@
const getMarkdown = require('./markdown')
+const defaultWrapHTML = html => `${html}
`
+
module.exports = (input, options = {}) => {
const env = {}
- const template = getMarkdown(options.markdown, options.extend).render(input, env)
+ const html = getMarkdown(options.markdown, options.extend).render(input, env)
+ const wrapHTML = options.wrapHTML || defaultWrapHTML
const component = `
- ${template}
+ ${wrapHTML(html)}
${env.hoistedTags ? env.hoistedTags.join('\n\n') : ''}`
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
index 53879e6..6398404 100644
--- a/test/__snapshots__/index.test.js.snap
+++ b/test/__snapshots__/index.test.js.snap
@@ -21,3 +21,12 @@ exports[`with tags 1`] = `
}
"
`;
+
+exports[`wrap html 1`] = `
+"
+ hello
+
+
+
+"
+`;
diff --git a/test/index.test.js b/test/index.test.js
index 2b08a90..5c7dfc2 100644
--- a/test/index.test.js
+++ b/test/index.test.js
@@ -1,8 +1,8 @@
const vmark = require('../')
-function snapshot(title, text) {
+function snapshot(title, text, options) {
test(title, () => {
- expect(vmark(text.trim())).toMatchSnapshot()
+ expect(vmark(text.trim(), options)).toMatchSnapshot()
})
}
@@ -21,3 +21,9 @@ snapshot('with tags', `
}
`)
+
+snapshot('wrap html', `
+# hello
+`, {
+ wrapHTML: html => `${html}`
+})