Merge pull request #75 from skiende74/feat/show-line-numbers-option-languages

Feat: Add Option to Show Line Numbers for Specific Languages

Author: timlrx

README.md

@@ -205,12 +205,14 @@ Note: The language must be first registered with [refractor].
 
 #### options.showLineNumbers
 
-Type: `boolean`.
-Default: `false`.
+Type: `boolean | string[]`  
+Default: `false`
+
+By default, line numbers will only be displayed for code block cells with a meta property that includes 'showLineNumbers'. To control the starting line number, use `showLineNumbers=X`, where `X` is the starting line number as a meta property for the code block.
 
-By default, line numbers will only be displayed for code block cells with a meta property that includes 'showLineNumbers'. To control the starting line number use `showLineNumbers=X`, where `X` is the starting line number as a meta property for the code block.
+If you would like to show line numbers for all code blocks without specifying the meta property, set this to `true`.
 
-If you would like to show line numbers for all code blocks, without specifying the meta property, set this to `true`.
+Alternatively, you can specify an array of languages for which the line numbers should be shown. For example, setting the option as `showLineNumbers: ['typescript']` will display line numbers only for code blocks with the language `typescript`, while other languages (e.g., `text`) will not display line numbers.
 
 **Note**: This will wrongly assign a language class and the class might appear as `language-{1,3}` or `language-showLineNumbers`, but allow the language highlighting and line number function to work. An possible approach would be to add a placeholder like `unknown` so the `div` will have `class="language-unknown"`
 

src/generator.js

@@ -3,7 +3,7 @@
  * @typedef {import('hast').Root} Root
  * @typedef Options options
  *   Configuration.
- * @property {boolean} [showLineNumbers]
+ * @property {boolean|string[]} [showLineNumbers]
  *   Set `showLineNumbers` to `true` to always display line number
  * @property {boolean} [ignoreMissing]
  *   Set `ignoreMissing` to `true` to ignore unsupported languages and line highlighting when no language is specified
@@ -276,11 +276,14 @@ const rehypePrismGenerator = (refractor) => {
         line.children = treeExtract.children
 
         // Line number
-        if (
+        const isShowNumbers =
           (meta.toLowerCase().includes('showLineNumbers'.toLowerCase()) ||
-            options.showLineNumbers) &&
+            options.showLineNumbers === true ||
+            (typeof options.showLineNumbers === 'object' &&
+              options.showLineNumbers.includes(lang))) &&
           !falseShowLineNumbersStr.some((str) => meta.toLowerCase().includes(str))
-        ) {
+
+        if (isShowNumbers) {
           line.properties.line = [(i + startingLineNumber).toString()]
           line.properties.className.push('line-number')
         }

test.js

@@ -244,6 +244,40 @@ test('not show line number when showLineNumbers=false', async () => {
   assert.not(result.match(/line="2"/g))
 })
 
+test('show line numbers when showLineNumbers=string[] includes target language', async () => {
+  const result = processHtml(
+    dedent`
+    <div>
+      <pre>
+      <code class="language-typescript code-highlight">x = 6
+      y = 7
+      </code>
+      </pre>
+    </div>
+    `,
+    { showLineNumbers: ['typescript', 'py'] }
+  ).trim()
+  assert.ok(result.match(/line="1"/g))
+  assert.ok(result.match(/line="2"/g))
+})
+
+test('not show line numbers when showLineNumbers=string[] does not include target language', async () => {
+  const result = processHtml(
+    dedent`
+    <div>
+      <pre>
+      <code class="language-javascript code-highlight">x = 6
+      y = 7
+      </code>
+      </pre>
+    </div>
+    `,
+    { showLineNumbers: ['typescript', 'py'] }
+  ).trim()
+  assert.not(result.match(/line="1"/g))
+  assert.not(result.match(/line="2"/g))
+})
+
 test('not show line number when showLineNumbers={false}', async () => {
   const meta = 'showLineNumbers={false}'
   const result = processHtml(