feat: add option wrapHTML

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: <code>html => &#x60;<div class="vmark">${html}</div>&#x60;</code>
+
+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:
+
+```js
+const wrapHTML = html => `<render-html>${html}</render-html>`
+```
+
+Then inside the `<render-html>` component, you can access the `html` like this:
+
+```vue
+<template>
+  <div class="content">
+    <!-- `html` is available as default slot -->
+    <slot name="default"></slot>
+  </div>
+</template>
+```
+
 ## Contributing
 
 1. Fork it!

lib/index.js

@@ -1,11 +1,14 @@
 const getMarkdown = require('./markdown')
 
+const defaultWrapHTML = html => `<div class="vmark">${html}</div>`
+
 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>
-  <div class="vmark">${template}</div>
+  ${wrapHTML(html)}
 </template>
 
 ${env.hoistedTags ? env.hoistedTags.join('\n\n') : ''}`

test/__snapshots__/index.test.js.snap

@@ -21,3 +21,12 @@ exports[`with tags 1`] = `
 }
 </style>"
 `;
+
+exports[`wrap html 1`] = `
+"<template>
+  <foo><h1>hello</h1>
+</foo>
+</template>
+
+"
+`;

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', `
 }
 </style>
 `)
+
+snapshot('wrap html', `
+# hello
+`, {
+  wrapHTML: html => `<foo>${html}</foo>`
+})