fix($markdown): Fix four spaces codeblocks rendering (Closes #1921) (#…

…1958)

packages/@vuepress/markdown/__tests__/__snapshots__/preWrapper.spec.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`preWrapper should wrap code with quadruple space 1`] = `
+<!--beforebegin-->
+<div class="language- extra-class">
+  <!--afterbegin--><pre><code>new Vue()
+</code></pre>
+  <!--beforeend-->
+</div>
+<!--afterend-->
+`;
+
+exports[`preWrapper should wrap code with triple back quote 1`] = `
+<!--beforebegin-->
+<div class="language-js extra-class">
+  <!--afterbegin--><pre><code class="language-js">new Vue()
+</code></pre>
+  <!--beforeend-->
+</div>
+<!--afterend-->
+`;

packages/@vuepress/markdown/__tests__/fragments/code-prewrapper-with-quotes.md

@@ -0,0 +1,3 @@
+``` js
+new Vue()
+```

packages/@vuepress/markdown/__tests__/fragments/code-prewrapper-with-spaces.md

@@ -0,0 +1 @@
+    new Vue()

packages/@vuepress/markdown/__tests__/preWrapper.spec.js

@@ -0,0 +1,24 @@
+import { getFragment } from '@vuepress/test-utils'
+import { Md } from './util'
+import preWrapper from '../lib/preWrapper.js'
+
+const md = Md()
+const mdP = Md().use(preWrapper)
+
+describe('preWrapper', () => {
+  test('should wrap code with triple back quote', () => {
+    const input = getFragment(__dirname, 'code-prewrapper-with-quotes.md')
+    const output1 = md.render(input)
+    const output2 = mdP.render(input)
+    expect(output1 === output2).toBe(false)
+    expect(output2).toMatchSnapshot()
+  })
+
+  test('should wrap code with quadruple space', () => {
+    const input = getFragment(__dirname, 'code-prewrapper-with-spaces.md')
+    const output1 = md.render(input)
+    const output2 = mdP.render(input)
+    expect(output1 === output2).toBe(false)
+    expect(output2).toMatchSnapshot()
+  })
+})

packages/@vuepress/markdown/lib/preWrapper.js

@@ -8,12 +8,14 @@
 //   4. <!--afterend-->
 
 module.exports = md => {
-  const fence = md.renderer.rules.fence
-  md.renderer.rules.fence = (...args) => {
+  const wrap = (wrapped) => (...args) => {
     const [tokens, idx] = args
     const token = tokens[idx]
-    const rawCode = fence(...args)
+    const rawCode = wrapped(...args)
     return `<!--beforebegin--><div class="language-${token.info.trim()} extra-class">`
     + `<!--afterbegin-->${rawCode}<!--beforeend--></div><!--afterend-->`
   }
+  const { fence, code_block: codeBlock } = md.renderer.rules
+  md.renderer.rules.fence = wrap(fence)
+  md.renderer.rules.code_block = wrap(codeBlock)
 }