fix($markdown): line highlighting not working correctly when importin…

…g code snippets (vuejs#2441)
larionov · Aug 19, 2020 · f30e2a4 · f30e2a4
1 parent 0b06477
commit f30e2a4
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 37 deletions.
diff --git a/packages/@vuepress/markdown/__tests__/__snapshots__/snippet.spec.js.snap b/packages/@vuepress/markdown/__tests__/__snapshots__/snippet.spec.js.snap
@@ -1,6 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`snippet import snippets when the file has a space in the file path 1`] = `
+exports[`snippet import snippet 1`] = `
+<pre><code class="language-js">export default function () {
+  // ..
+}
+</code></pre>
+`;
+
+exports[`snippet import snippet with highlight multiple lines 1`] = `
 <div class="highlight-lines">
   <div class="highlighted">&nbsp;</div>
   <div class="highlighted">&nbsp;</div>
@@ -10,15 +17,34 @@ exports[`snippet import snippets when the file has a space in the file path 1`]
 }
 `;
 
-exports[`snippet import snippet 1`] = `
-<pre><code class="language-js">export default function () {
-  // ..
+exports[`snippet import snippet with highlight single and multiple lines 1`] = `
+<div class="highlight-lines">
+  <div class="highlighted">&nbsp;</div>
+  <div class="highlighted">&nbsp;</div>
+  <div class="highlighted">&nbsp;</div><br>
+</div>export default function () {
+// ..
 }
-</code></pre>
 `;
 
-exports[`snippet import snippet with region and highlight 1`] = `
-<pre><code class="language-js{1,3}">function foo () {
+exports[`snippet import snippet with highlight single line 1`] = `
+<div class="highlight-lines">
+  <div class="highlighted">&nbsp;</div><br>
+  <div class="highlighted">&nbsp;</div><br>
+</div>export default function () {
+// ..
+}
+`;
+
+exports[`snippet import snippet with indented region 1`] = `
+<pre><code class="language-html">&lt;section&gt;
+  &lt;h1&gt;Hello World&lt;/h1&gt;
+&lt;/section&gt;
+&lt;div&gt;Lorem Ipsum&lt;/div&gt;</code></pre>
+`;
+
+exports[`snippet import snippet with region 1`] = `
+<pre><code class="language-js">function foo () {
   return ({
     dest: '../../vuepress',
     locales: {
@@ -48,34 +74,8 @@ exports[`snippet import snippet with region and highlight 1`] = `
 }</code></pre>
 `;
 
-exports[`snippet import snippet with highlight multiple lines 1`] = `
-<div class="highlight-lines">
-  <div class="highlighted">&nbsp;</div>
-  <div class="highlighted">&nbsp;</div>
-  <div class="highlighted">&nbsp;</div><br>
-</div>export default function () {
-// ..
-}
-`;
-
-exports[`snippet import snippet with highlight single line 1`] = `
-<div class="highlight-lines">
-  <div class="highlighted">&nbsp;</div><br>
-  <div class="highlighted">&nbsp;</div><br>
-</div>export default function () {
-// ..
-}
-`;
-
-exports[`snippet import snippet with indented region 1`] = `
-<pre><code class="language-html">&lt;section&gt;
-  &lt;h1&gt;Hello World&lt;/h1&gt;
-&lt;/section&gt;
-&lt;div&gt;Lorem Ipsum&lt;/div&gt;</code></pre>
-`;
-
-exports[`snippet import snippet with region 1`] = `
-<pre><code class="language-js">function foo () {
+exports[`snippet import snippet with region and highlight 1`] = `
+<pre><code class="language-js{1,3}">function foo () {
   return ({
     dest: '../../vuepress',
     locales: {
@@ -105,7 +105,7 @@ exports[`snippet import snippet with region 1`] = `
 }</code></pre>
 `;
 
-exports[`snippet import snippet with region and single line highlight > 10 1`]  = `
+exports[`snippet import snippet with region and single line highlight > 10 1`] = `
 <pre><code class="language-js{11}">function foo () {
   return ({
     dest: '../../vuepress',
@@ -135,3 +135,13 @@ exports[`snippet import snippet with region and single line highlight > 10 1`]
   })
 }</code></pre>
 `;
+
+exports[`snippet import snippets when the file has a space in the file path 1`] = `
+<div class="highlight-lines">
+  <div class="highlighted">&nbsp;</div>
+  <div class="highlighted">&nbsp;</div>
+  <div class="highlighted">&nbsp;</div><br>
+</div>export default function () {
+// ..
+}
+`;
diff --git a/...markdown/__tests__/fragments/code-snippet-highlightLines-single-and-multiple.md b/...markdown/__tests__/fragments/code-snippet-highlightLines-single-and-multiple.md
@@ -0,0 +1 @@
+<<< @/packages/@vuepress/markdown/__tests__/fragments/snippet.js{1-2,3}
diff --git a/packages/@vuepress/markdown/__tests__/snippet.spec.js b/packages/@vuepress/markdown/__tests__/snippet.spec.js
@@ -25,6 +25,12 @@ describe('snippet', () => {
     expect(output).toMatchSnapshot()
   })
 
+  test('import snippet with highlight single and multiple lines', () => {
+    const input = getFragment(__dirname, 'code-snippet-highlightLines-single-and-multiple.md')
+    const output = mdH.render(input)
+    expect(output).toMatchSnapshot()
+  })
+
   test('import snippets when the file has a space in the file path', () => {
     const input = getFragment(__dirname, 'code-snippet-with-space-in-path.md')
     const output = mdH.render(input)

diff --git a/packages/@vuepress/markdown/lib/snippet.js b/packages/@vuepress/markdown/lib/snippet.js
@@ -137,7 +137,7 @@ module.exports = function snippet (md, options = {}) {
      *
      * captures: ['/path/to/file.extension', 'extension', '#region', '{meta}']
      */
-    const rawPathRegexp = /^(.+(?:\.([a-z]+)))(?:(#[\w-]+))?(?: ?({\d+(?:[,-]\d+)?}))?$/
+    const rawPathRegexp = /^(.+(?:\.([a-z]+)))(?:(#[\w-]+))?(?: ?({\d+(?:[,-]\d+)*}))?$/
 
     const rawPath = state.src.slice(start, end).trim().replace(/^@/, root).trim()
     const [filename = '', extension = '', region = '', meta = ''] = (rawPathRegexp.exec(rawPath) || []).slice(1)
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<<< @/packages/@vuepress/markdown/__tests__/fragments/snippet.js{1-2,3}