feat: insert code block, closes #13

Author: egoist

README.md

@@ -58,7 +58,27 @@ const component = vmark(input)
 // Get the component in SFC format
 ```
 
+### Insert code block
 
+Automatically transform:
+
+````markdown
+```vue {insert: 'below'}
+<button>Button</button>
+```
+````
+
+Into:
+
+````markdown
+```vue
+<button>Button</button>
+```
+
+<button>Button</button>
+````
+
+`insert` can also be `above`.
 
 ## API
 

lib/markdown/index.js

@@ -11,5 +11,8 @@ module.exports = (options, extend) => {
     extend(md)
   }
 
+  // Load this plugin at the end in case other plugins change `md.rules.fence`
+  md.use(require('./insert-code-plugin'))
+
   return md
 }

lib/markdown/insert-code-plugin.js

@@ -0,0 +1,29 @@
+module.exports = md => {
+  const RE = /\s*{([^}]+)}/
+
+  const parseOptions = str => {
+    if (!RE.test(str)) {
+      return {}
+    }
+    const [, options] = RE.exec(str)
+    const fn = new Function(`return {${options}}`) // eslint-disable-line no-new-func
+    return fn()
+  }
+
+  const { fence } = md.renderer.rules
+  md.renderer.rules.fence = (tokens, idx, options, env, self) => {
+    const token = tokens[idx]
+    const info = parseOptions(token.info)
+    if (!info.insert) {
+      return self.renderToken(token)
+    }
+    const res = fence(tokens, idx, options, env, self)
+    if (info.insert === 'above') {
+      return `${token.content}${res}`
+    }
+    if (info.insert === 'below') {
+      return `${res}${token.content}`
+    }
+    return res
+  }
+}

test/__snapshots__/index.test.js.snap

@@ -9,6 +9,30 @@ exports[`basic 1`] = `
 "
 `;
 
+exports[`insert code above 1`] = `
+"<template>
+  <div class=\\"vmark\\"><h1>hello</h1>
+<button>Button</button>
+<pre><code class=\\"language-vue\\">&lt;button&gt;Button&lt;/button&gt;
+</code></pre>
+</div>
+</template>
+
+"
+`;
+
+exports[`insert code below 1`] = `
+"<template>
+  <div class=\\"vmark\\"><h1>hello</h1>
+<pre><code class=\\"language-vue\\">&lt;button&gt;Button&lt;/button&gt;
+</code></pre>
+<button>Button</button>
+</div>
+</template>
+
+"
+`;
+
 exports[`with tags 1`] = `
 "<template>
   <div class=\\"vmark\\"><div class=\\"foo\\">{{ foo }}</div>

test/index.test.js

@@ -27,3 +27,19 @@ snapshot('wrap html', `
 `, {
   wrapHTML: html => `<foo>${html}</foo>`
 })
+
+snapshot('insert code above', `
+# hello
+
+\`\`\`vue {insert: 'above'}
+<button>Button</button>
+\`\`\`
+`)
+
+snapshot('insert code below', `
+# hello
+
+\`\`\`vue {insert: 'below'}
+<button>Button</button>
+\`\`\`
+`)