add feature to allow specifying language on import snippet markdown h…

package.json

@@ -32,22 +32,25 @@
     ]
   },
   "devDependencies": {
+    "@types/escape-html": "^0.0.20",
+    "@types/fs-extra": "^5.0.4",
+    "@types/globby": "^8.0.0",
+    "@types/hash-sum": "^1.0.0",
+    "@types/lru-cache": "^4.1.1",
+    "@types/node": "^10.12.12",
+    "@types/semver": "^5.5.0",
+    "@vue/test-utils": "^1.0.0-beta.29",
     "conventional-changelog-cli": "^1.3.22",
     "eslint": "^4.19.1",
     "eslint-plugin-jest": "^21.15.1",
     "eslint-plugin-vue-libs": "^3.0.0",
+    "inquirer": "^6.2.0",
     "lerna": "^3.6.0",
     "lint-staged": "^7.0.4",
     "minimist": "^1.2.0",
-    "yorkie": "^1.0.3",
-    "inquirer": "^6.2.0",
-    "typescript": "^3.2.2",
-    "@types/node": "^10.12.12",
-    "@types/lru-cache": "^4.1.1",
-    "@types/fs-extra": "^5.0.4",
-    "@types/semver": "^5.5.0",
-    "@types/hash-sum": "^1.0.0",
-    "@types/globby": "^8.0.0",
-    "@types/escape-html": "^0.0.20"
+    "ts-jest": "^24.0.0",
+    "ts-lint": "^4.5.1",
+    "typescript": "^3.3.3",
+    "yorkie": "^1.0.3"
   }
 }

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

@@ -1,35 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`containers danger 1`] = `
-<div class="danger custom-block">
-  <p class="custom-block-title">WARNING</p>
-  <p>I am a danger</p>
+"<div class=\\"danger custom-block\\"><p class=\\"custom-block-title\\">WARNING</p>
+<p>I am a danger</p>
 </div>
+"
 `;
 
 exports[`containers tip 1`] = `
-<div class="tip custom-block">
-  <p class="custom-block-title">TIP</p>
-  <p>I am a tip</p>
+"<div class=\\"tip custom-block\\"><p class=\\"custom-block-title\\">TIP</p>
+<p>I am a tip</p>
 </div>
+"
 `;
 
 exports[`containers tip-override 1`] = `
-<div class="tip custom-block">
-  <p class="custom-block-title">提示</p>
-  <p>I am a tip</p>
+"<div class=\\"tip custom-block\\"><p class=\\"custom-block-title\\">提示</p>
+<p>I am a tip</p>
 </div>
+"
 `;
 
 exports[`containers v-pre 1`] = `
-<div v-pre>
-  <p>I am a v-pre</p>
+"<div v-pre>
+<p>I am a v-pre</p>
 </div>
+"
 `;
 
 exports[`containers warning 1`] = `
-<div class="warning custom-block">
-  <p class="custom-block-title">WARNING</p>
-  <p>I am a warning</p>
+"<div class=\\"warning custom-block\\"><p class=\\"custom-block-title\\">WARNING</p>
+<p>I am a warning</p>
 </div>
+"
 `;

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

@@ -1,6 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`highlight should highlight code 1`] = `
-<pre v-pre class="language-js"><code><span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
+"<pre v-pre class=\\"language-js\\"><code><span class=\\"token keyword\\">new</span> <span class=\\"token class-name\\">Vue</span><span class=\\"token punctuation\\">(</span><span class=\\"token punctuation\\">)</span>
 </code></pre>
+"
 `;

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

@@ -1,20 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`highlightLines highlight multiple lines 1`] = `
-<div class="highlight-lines">
-  <div class="highlighted">&nbsp;</div>
-  <div class="highlighted">&nbsp;</div>
-  <br>
-  <div class="highlighted">&nbsp;</div>
-  <div class="highlighted">&nbsp;</div>
-  <br>
-  <br>
-</div>const app = new Vue({ render, router }) app.$mount('#app')
+"<div class=\\"highlight-lines\\"><div class=\\"highlighted\\">&nbsp;</div><div class=\\"highlighted\\">&nbsp;</div><br><div class=\\"highlighted\\">&nbsp;</div><div class=\\"highlighted\\">&nbsp;</div><br><br></div>const app = new Vue({
+  render,
+  router
+})
+
+app.$mount('#app')
+"
 `;
 
 exports[`highlightLines highlight single line 1`] = `
-<div class="highlight-lines">
-  <div class="highlighted">&nbsp;</div>
-  <br>
-</div>new Vue()
+"<div class=\\"highlight-lines\\"><div class=\\"highlighted\\">&nbsp;</div><br></div>new Vue()
+"
 `;

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

@@ -1,30 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`hoist Should keep script and style when not using hoist 1`] = `
-<h1>H1</h1>
-<script src="vue.js"></script>
+"<h1>H1</h1>
+<script src=\\"vue.js\\"></script>
 <style>
   .vue {
     font-size: 16px;
   }
 </style>
 <h2>H2</h2>
+"
 `;
 
 exports[`hoist Should miss script and style when using hoist 1`] = `
-<h1>H1</h1>
+"<h1>H1</h1>
 <h2>H2</h2>
+"
 `;
 
 exports[`hoist Should miss script and style when using hoist 2`] = `
 Object {
+  "__data_block": Object {},
   "hoistedTags": Array [
-    <script src="vue.js"></script>,
-    <style>
+    "<script src=\\"vue.js\\"></script>
+",
+    "<style>
   .vue {
     font-size: 16px;
   }
-</style>,
+</style>
+",
   ],
 }
 `;

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

@@ -1,26 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`lineNumbers should lineNumbers work with highlightLines 1`] = `
-<!--beforebegin-->
-<div class="language-js line-numbers-mode">
-  <!--afterbegin-->
-  <div class="highlight-lines">
-    <div class="highlighted">&nbsp;</div>
-    <br>
-  </div>new Vue()
-  <div class="line-numbers-wrapper"></div>
-  <!--beforeend-->
-</div>
-<!--afterend-->
+"<!--beforebegin--><div class=\\"language-js line-numbers-mode\\"><!--afterbegin--><div class=\\"highlight-lines\\"><div class=\\"highlighted\\">&nbsp;</div><br></div>new Vue()
+<div class=\\"line-numbers-wrapper\\"></div><!--beforeend--></div><!--afterend-->"
 `;
 
 exports[`lineNumbers should render lineNumbers 1`] = `
-<!--beforebegin-->
-<div class="language-js line-numbers-mode">
-  <!--afterbegin--><pre><code class="language-js">new Vue()
+"<!--beforebegin--><div class=\\"language-js line-numbers-mode\\"><!--afterbegin--><pre><code class=\\"language-js\\">new Vue()
 </code></pre>
-  <div class="line-numbers-wrapper"></div>
-  <!--beforeend-->
-</div>
-<!--afterend-->
+<div class=\\"line-numbers-wrapper\\"></div><!--beforeend--></div><!--afterend-->"
 `;

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

@@ -1,25 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`link should render external links correctly 1`] = `
-<p>
-  <a href="https://vuejs.org/" target="_blank" rel="noopener noreferrer">vue
-    <OutboundLink/>
-  </a>
-</p>
+"<p><a href=\\"https://vuejs.org/\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">vue<OutboundLink/></a></p>
+"
 `;
 
 exports[`link should render external links correctly 2`] = `
-<p>
-  <a href="http://vuejs.org/" target="_blank" rel="noopener noreferrer">vue
-    <OutboundLink/>
-  </a>
-</p>
+"<p><a href=\\"http://vuejs.org/\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">vue<OutboundLink/></a></p>
+"
 `;
 
 exports[`link should render external links correctly 3`] = `
-<p>
-  <a href="https://google.com" target="_blank" rel="noopener noreferrer">some <strong>link</strong> with <code>code</code>
-    <OutboundLink/>
-  </a>
-</p>
+"<p><a href=\\"https://google.com\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">some <strong>link</strong> with <code>code</code><OutboundLink/></a></p>
+"
 `;

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

@@ -7,6 +7,15 @@ exports[`snippet import snippet 1`] = `
 </code></pre>
 `;
 
+exports[`snippet import snippet with highlight lines and language specified as ruby 1`] = `
+<div class="highlight-lines">
+  <div class="highlighted">&nbsp;</div>
+  <br>
+  <div class="highlighted">&nbsp;</div>
+  <br>
+</div>def vuepress puts 'vuepress' end
+`;
+
 exports[`snippet import snippet with highlight multiple lines 1`] = `
 <div class="highlight-lines">
   <div class="highlighted">&nbsp;</div>
@@ -24,3 +33,10 @@ exports[`snippet import snippet with highlight single line 1`] = `
   <br>
 </div>export default function () { // .. }
 `;
+
+exports[`snippet import snippet with language specified as ruby 1`] = `
+<pre><code class="language-ruby">def vuepress
+  puts 'vuepress'
+end
+</code></pre>
+`;

packages/@vuepress/markdown/__tests__/fragments/code-snippet-highlightLines-multiple.md

@@ -1 +1 @@
-<<< @/packages/@vuepress/core/__test__/markdown/fragments/snippet.js{1-3}
+<<< @/packages/@vuepress/markdown/__tests__/fragments/snippet.js{1-3}

packages/@vuepress/markdown/__tests__/fragments/code-snippet-highlightLines-single-specify-language-ruby.md

@@ -0,0 +1,3 @@
+<<< @/packages/@vuepress/markdown/__tests__/fragments/snippet.rb{1,3} lang=ruby
+
+

packages/@vuepress/markdown/__tests__/fragments/code-snippet-highlightLines-single.md

@@ -1 +1 @@
-<<< @/packages/@vuepress/core/__test__/markdown/fragments/snippet.js{1,3}
+<<< @/packages/@vuepress/markdown/__tests__/fragments/snippet.js{1,3}

packages/@vuepress/markdown/__tests__/fragments/code-snippet-specify-language-ruby.md

@@ -0,0 +1 @@
+<<< @/packages/@vuepress/markdown/__tests__/fragments/snippet.rb lang=ruby

packages/@vuepress/markdown/__tests__/fragments/code-snippet.md

@@ -1 +1 @@
-<<< @/packages/@vuepress/core/__test__/markdown/fragments/snippet.js
+<<< @/packages/@vuepress/markdown/__tests__/fragments/snippet.js

packages/@vuepress/markdown/__tests__/fragments/snippet.rb

@@ -0,0 +1,3 @@
+def vuepress
+  puts 'vuepress'
+end

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

@@ -1,9 +1,14 @@
-import { Md, getFragment } from './util'
+import {
+  Md,
+  getFragment
+} from './util'
 import snippet from '../lib/snippet.js'
 import highlightLines from '../lib/highlightLines.js'
 
 const md = Md().use(snippet)
-const mdH = Md().use(snippet).use(highlightLines)
+const mdH = Md()
+  .use(highlightLines)
+  .use(snippet)
 
 describe('snippet', () => {
   test('import snippet', async () => {
@@ -23,4 +28,19 @@ describe('snippet', () => {
     const output = mdH.render(input)
     expect(output).toMatchSnapshot()
   })
+
+  test('import snippet with language specified as ruby', async () => {
+    const input = await getFragment('code-snippet-specify-language-ruby')
+
+    const output = md.render(input)
+    expect(output).toMatchSnapshot()
+    expect(output).toMatch(/ruby/)
+  })
+
+  test('import snippet with highlight lines and language specified as ruby', async () => {
+    const input = await getFragment('code-snippet-highlightLines-single-specify-language-ruby')
+
+    const output = mdH.render(input)
+    expect(output).toMatchSnapshot()
+  })
 })

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

@@ -2,12 +2,14 @@ const { fs } = require('@vuepress/shared-utils')
 
 module.exports = function snippet (md, options = {}) {
   const root = options.root || process.cwd()
+
   function parser (state, startLine, endLine, silent) {
     const CH = '<'.charCodeAt(0)
     const pos = state.bMarks[startLine] + state.tShift[startLine]
     const max = state.eMarks[startLine]
 
-    // if it's indented more than 3 spaces, it should be a code block
+    // if it's indented more than 3 spaces,
+    // it should be a code block
     if (state.sCount[startLine] - state.blkIndent >= 4) {
       return false
     }
@@ -28,10 +30,24 @@ module.exports = function snippet (md, options = {}) {
     const content = fs.existsSync(filename) ? fs.readFileSync(filename).toString() : 'Not found: ' + filename
     const meta = rawPath.replace(filename, '')
 
+    const langExtWithMeta = () => {
+      if (meta && /lang/.test(meta)) {
+        const langSet = meta.match(/lang=\w+/)[0]
+        if (langSet) {
+          const lang = langSet.split('=')[1]
+          const extractedMeta = meta.replace(langSet, '')
+
+          return lang + extractedMeta
+        }
+      }
+
+      return filename.split('.').pop() + meta
+    }
+
     state.line = startLine + 1
 
     const token = state.push('fence', 'code', 0)
-    token.info = filename.split('.').pop() + meta
+    token.info = langExtWithMeta()
     token.content = content
     token.markup = '```'
     token.map = [startLine, startLine + 1]