feat: highlight plugin add support for line start (#627)

* feat: highlight plugin add support for line start * format code Co-authored-by: Kevin Titor <[email protected]>
saberland · May 18, 2020 · 87232ac · 87232ac · vercel · May 18, 2020
1 parent 5d01522
commit 87232ac
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/packages/saber-highlight-css/default.css b/packages/saber-highlight-css/default.css
@@ -71,7 +71,6 @@
   text-align: right;
   padding-right: 0.8rem;
   margin-right: .8rem;
-  counter-reset: linenumber;
 }
 
 .saber-highlight-line-numbers > span {

diff --git a/packages/saber/src/markdown/__test__/__snapshots__/highlight-plugin.test.js.snap b/packages/saber/src/markdown/__test__/__snapshots__/highlight-plugin.test.js.snap
@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`code block markdown.lineNumbers = true 1`] = `"<div class=\\"saber-highlight has-line-numbers\\" v-pre=\\"\\" data-lang=\\"js\\"><pre class=\\"saber-highlight-code language-js\\"><code class=\\"language-js\\"><span aria-hidden=\\"true\\" class=\\"saber-highlight-line-numbers\\"><span></span></span>const cry = Array(3).fill('ora').join(' ')</code></pre></div>"`;
+exports[`code block markdown.lineNumbers = true 1`] = `"<div class=\\"saber-highlight has-line-numbers\\" v-pre=\\"\\" data-lang=\\"js\\"><pre class=\\"saber-highlight-code language-js\\"><code class=\\"language-js\\"><span aria-hidden=\\"true\\" class=\\"saber-highlight-line-numbers\\" style=\\"counter-reset: linenumber 0\\"><span></span></span>const cry = Array(3).fill('ora').join(' ')</code></pre></div>"`;
 
-exports[`code block with {lineNumbers:true} 1`] = `"<div class=\\"saber-highlight has-line-numbers\\" v-pre=\\"\\" data-lang=\\"js\\"><pre class=\\"saber-highlight-code language-js\\"><code class=\\"language-js\\"><span aria-hidden=\\"true\\" class=\\"saber-highlight-line-numbers\\"><span></span></span>const cry = Array(3).fill('ora').join(' ')</code></pre></div>"`;
+exports[`code block with {lineNumbers:true} 1`] = `"<div class=\\"saber-highlight has-line-numbers\\" v-pre=\\"\\" data-lang=\\"js\\"><pre class=\\"saber-highlight-code language-js\\"><code class=\\"language-js\\"><span aria-hidden=\\"true\\" class=\\"saber-highlight-line-numbers\\" style=\\"counter-reset: linenumber 0\\"><span></span></span>const cry = Array(3).fill('ora').join(' ')</code></pre></div>"`;
+
+exports[`code block with {lineNumbers:true,lineStart:5} 1`] = `"<div class=\\"saber-highlight has-line-numbers\\" v-pre=\\"\\" data-lang=\\"js\\"><pre class=\\"saber-highlight-code language-js\\"><code class=\\"language-js\\"><span aria-hidden=\\"true\\" class=\\"saber-highlight-line-numbers\\" style=\\"counter-reset: linenumber 4\\"><span></span></span>const cry = Array(3).fill('ora').join(' ')</code></pre></div>"`;
 
 exports[`main 1`] = `"<div class=\\"saber-highlight\\" v-pre=\\"\\" data-lang=\\"vue\\"><pre class=\\"saber-highlight-code language-vue\\"><code class=\\"language-vue\\">&lt;div&gt;hehe&lt;/div&gt;</code></pre></div>"`;
diff --git a/packages/saber/src/markdown/__test__/highlight-plugin.test.js b/packages/saber/src/markdown/__test__/highlight-plugin.test.js
@@ -32,6 +32,21 @@ const cry = Array(3).fill('ora').join(' ')
   expect(html).toMatchSnapshot()
 })
 
+test('code block with {lineNumbers:true,lineStart:5}', () => {
+  const md = new Markdown()
+  const { env } = createEnv()
+  md.use(fenceOptionsPlugin)
+  const html = md.render(
+    `
+\`\`\`js {lineNumbers:true,lineStart:5}
+const cry = Array(3).fill('ora').join(' ')
+\`\`\`
+  `,
+    env
+  )
+  expect(html).toMatchSnapshot()
+})
+
 test('code block markdown.lineNumbers = true', () => {
   const md = new Markdown()
   const { env } = createEnv()

diff --git a/packages/saber/src/markdown/highlight-plugin.js b/packages/saber/src/markdown/highlight-plugin.js
@@ -10,8 +10,8 @@ const parseOptions = str => {
   return fn()
 }
 
-const generateLineNumbers = code =>
-  '<span aria-hidden="true" class="saber-highlight-line-numbers">' +
+const generateLineNumbers = (code, lineStart) =>
+  `<span aria-hidden="true" class="saber-highlight-line-numbers" style="counter-reset: linenumber ${lineStart}">` +
   code
     .trim()
     .split('\n')
@@ -91,7 +91,16 @@ module.exports = (
           lineNumbers
         : // If it's set to false, even if the global config says true, ignore
           fenceOptions.lineNumbers
-    const lines = shouldGenerateLineNumbers ? generateLineNumbers(code) : ''
+    const lineStartNumber =
+      // It might be 0 so check for undefined
+      fenceOptions.lineStart === undefined
+        ? // Default line should be 1
+          1
+        : fenceOptions.lineStart
+    const lines = shouldGenerateLineNumbers
+      ? // Need to substract 1 because the counter will be incremented right away
+        generateLineNumbers(code, lineStartNumber - 1)
+      : ''
 
     const preAttrs = renderAttrs([
       ...(token.attrs || []),

diff --git a/website/pages/docs/markdown-features.md b/website/pages/docs/markdown-features.md
@@ -324,6 +324,32 @@ Output:
 ]
 ```
 
+### Initial Line Number in Code Blocks
+
+For this to work, `lineNumbers` must be set to `true`.
+
+Input:
+
+````markdown
+```js {lineNumbers:true,lineStart:7}
+{
+  text: 'A section',
+  slug: 'a-section',
+  level: 2
+}
+```
+````
+
+Output:
+
+```js {lineNumbers:true,lineStart:7}
+{
+  text: 'A section',
+  slug: 'a-section',
+  level: 2
+}
+```
+
 ## Configure markdown-it
 
 Check out [markdown.options](./saber-config.md#options) for setting markdown-it options and [markdown.plugins](./saber-config.md#plugins-2) for adding markdown-it plugins.