rehype-highlight-code-lines 1.0.4 → 1.0.5

package/README.md

@@ -1,22 +1,22 @@
 # rehype-highlight-code-lines
 
-[![NPM version][badge-npm-version]][npm-package-url]
-[![NPM downloads][badge-npm-download]][npm-package-url]
-[![Build][badge-build]][github-workflow-url]
-[![codecov](https://codecov.io/gh/ipikuka/rehype-highlight-code-lines/graph/badge.svg?token=RKrZlvMHwq)](https://codecov.io/gh/ipikuka/rehype-highlight-code-lines)
-[![type-coverage](https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fipikuka%2Frehype-highlight-code-lines%2Fmaster%2Fpackage.json)](https://github.com/ipikuka/rehype-highlight-code-lines)
-[![typescript][badge-typescript]][typescript-url]
-[![License][badge-license]][github-license-url]
+[![npm version][badge-npm-version]][url-npm-package]
+[![npm downloads][badge-npm-download]][url-npm-package]
+[![publish to npm][badge-publish-to-npm]][url-publish-github-actions]
+[![code-coverage][badge-codecov]][url-codecov]
+[![type-coverage][badge-type-coverage]][url-github-package]
+[![typescript][badge-typescript]][url-typescript]
+[![license][badge-license]][url-license]
 
-This package is a [unified][unified] ([rehype][rehype]) plugin **to add container to each line in a code block, allowing numbering of the code block and highlighting desired lines of code**.
+This package is a **[unified][unified]** (**[rehype][rehype]**) plugin that **wraps each line of code in a container, enabling code block numbering and line highlighting**.
 
-**[unified][unified]** is a project that transforms content with abstract syntax trees (ASTs) using the new parser **[micromark][micromark]**. **[remark][remark]** adds support for markdown to unified. **[mdast][mdast]** is the Markdown Abstract Syntax Tree (AST) which is a specification for representing markdown in a syntax tree. "**[rehype][rehype]**" is a tool that transforms HTML with plugins. "**[hast][hast]**" stands for HTML Abstract Syntax Tree (HAST) that rehype uses.
+**[unified][unified]** is a project that transforms content with abstract syntax trees (ASTs) using the new parser **[micromark][micromark]**. **[remark][remark]** adds support for markdown to unified. **[mdast][mdast]** is the Markdown Abstract Syntax Tree (AST) which is a specification for representing markdown in a syntax tree. **[rehype][rehype]** is a tool that transforms HTML with plugins. **[hast][hast]** stands for HTML Abstract Syntax Tree (HAST) that rehype uses.
 
-**This plugin allows adding line numbers to code blocks and highlighting of desired code lines.**
+**This plugin enables line numbering for code blocks and highlights specific lines as needed.**
 
 ## When should I use this?
 
-The `rehype-highlight-code-lines` is useful if you want to add line numbers to code blocks and want to highlight desired code lines.
+The `rehype-highlight-code-lines`  is ideal for adding line numbers to code blocks and highlighting specific lines.
 
 **The `rehype-highlight-code-lines` is NOT code highlighter and does NOT provide code highlighting!** You can use a code highlighter for example **[rehype-highlight][rehype-highlight]** to highlight the code, then use the `rehype-highlight-code-lines` **after**. 
 
@@ -42,9 +42,9 @@ yarn add rehype-highlight-code-lines
 
 ## Usage
 
-In a code fence, just after the language of the code block,
-+ specify a range of number in curly braces in order to highlight desired code lines,
-+ and/or add `showLineNumbers` in order to add numbering to code lines.
+In a code fence, right after the language of the code block:
++ Use curly braces `{}` to specify a range of line numbers to highlight specific lines.
++ Add `showLineNumbers` to enable line numbering.
 
 **\`\`\`[language] {2,4-6} showLineNumbers**
 
@@ -54,7 +54,7 @@ In a code fence, just after the language of the code block,
 
 **\`\`\`[language] showLineNumbers**
 
-You can use the specifiers without a language.
+You can use the specifiers without a language:
 
 **\`\`\`{5} showLineNumbers**
 
@@ -140,7 +140,6 @@ All options are **optional** and have **default values**.
 ```typescript
 type HighlightLinesOptions = {
   showLineNumbers?: boolean; // default is "false"
-  lineContainerTagName?: "div" | "span"; // default is "span"
 };
 
 use(rehypeHighlightLines, HighlightLinesOptions);
@@ -176,28 +175,27 @@ Sometimes you may want to start the line numbering from a specific number. In th
 
 #### `lineContainerTagName`
 
-It is a **union** type option which is **"div" | "span"** for providing custom HTML tag name for code lines.
+**It is a deprecated option.** Marked as `@deprecated`, will be removed in the next versions.
 
-By default, it is `span` which is **inline** level container. If you set it as `div`, the container will be **block** level, in perspective of CSS.
+It was a **union** type option which was **"div" | "span"** for providing custom HTML tag name for code lines.
+
+By default, it is `span` which is **inline** level container. If you set it as `div`, the container will still be `span` after deprecation.
 
 ```javascript
 use(rehypeHighlightLines, {
-  lineContainerTagName: "div",
+  lineContainerTagName: "div", // @deprecated, always "span"
 });
 ```
 
-Now, the code line container's tag name will be `div`.
-
 ### Examples:
 
 ```typescript
 // line numbering will occur as per directive "showLineNumber" and code-line containers will be <span> inline element
 use(rehypeHighlightLines);
 
-// all code blocks will be numbered and code-line containers will be <div> block element
+// all code blocks will be numbered by default and code-line containers will be <span> inline element
 use(rehypeHighlightLines, {
   showLineNumbers: true,
-  lineContainerTagName: "div",
 });
 ```
 
@@ -210,32 +208,6 @@ use(rehypeHighlightLines, {
 + [demo blog application](https://next-mdx-remote-client-in-app-router.vercel.app/) using `next-mdx-remote-client` within `Next.js app router`
 + [demo blog application](https://next-mdx-remote-client-in-pages-router.vercel.app/) using `next-mdx-remote-client` within `Next.js pages router`
 
-## Copying Code Block's Content Issue
-
-When the line container is "div" block element, the end of line character (eol) at the end of line causes unwanted extra blank line. In order to fix the issue, I've **removed the eol when it is "div", but kept the eol when it is "span"**.
-
-But, **the lack of the eol when "div" causes another issue.** If you implement a button for copying code block content, it doesn't work as expected since all code are printed in a single line. In order to work around the issue, you can implement an `onClick` of the `button` like below:
-
-*I assume you use a `useRef` for `<pre>` element.*
-
-```javascript
-const onClick = () => {
-  if (!preRef.current) return;
-
-  // clone the <code> element in order not to cause any change in actual DOM
-  const code = preRef.current.getElementsByTagName("code")[0].cloneNode(true);
-
-  // add eol to each code-line since there is no eol at the end when they are div
-  Array.from((code as HTMLElement).querySelectorAll("div.code-line")).forEach(
-    (line) => {
-      line.innerHTML = line.innerHTML + "\r";
-    }
-  );
-
-  void navigator.clipboard.writeText(code.textContent ?? "");
-};
-```
-
 ## Styling
 
 The following styles can be added for **line highlighting** and **line numbering** to work correctly:
@@ -275,29 +247,22 @@ pre > code {
 }
 
 .code-line {
+  min-width: 100%;
   padding-left: 12px;
   padding-right: 12px;
   margin-left: -12px;
   margin-right: -12px;
   border-left: 4px solid transparent; /* prepare for highlighted code-lines */
-}
 
-div.code-line:empty {
-  /* it is necessary because there is no even eol character in div code-lines */
-  height: 15.5938px; /* calculated height */
-}
-
-span.code-line {
-  min-width: 100%;
   display: inline-block;
 }
 
 .code-line.inserted {
-  background-color: var(--color-inserted-line); /* inserted code-line (+) color */
+  background-color: var(--color-inserted-line); /* inserted code-line (+) */
 }
 
 .code-line.deleted {
-  background-color: var(--color-deleted-line); /* deleted code-line (-) color */
+  background-color: var(--color-deleted-line); /* deleted code-line (-) */
 }
 
 .highlighted-code-line {
@@ -324,7 +289,7 @@ This plugin modifies the `hast` (HTML abstract syntax tree).
 
 ## Types
 
-This package is fully typed with [TypeScript][typescript].
+This package is fully typed with [TypeScript][url-typescript].
 
 The plugin exports the type `HighlightLinesOptions`.
 
@@ -375,17 +340,6 @@ I like to contribute the Unified / Remark / MDX ecosystem, so I recommend you to
 
 [MIT License](./LICENSE) © ipikuka
 
-### Keywords
-
-🟩 [unified][unifiednpm] 🟩 [rehype][rehypenpm] 🟩 [rehype plugin][rehypepluginnpm] 🟩 [hast][hastnpm] 🟩 [markdown][markdownnpm] 🟩 [rehype-highlight][rehypehighlightnpm]
-
-[unifiednpm]: https://www.npmjs.com/search?q=keywords:unified
-[rehypenpm]: https://www.npmjs.com/search?q=keywords:rehype
-[rehypepluginnpm]: https://www.npmjs.com/search?q=keywords:rehype%20plugin
-[hastnpm]: https://www.npmjs.com/search?q=keywords:hast
-[markdownnpm]: https://www.npmjs.com/search?q=keywords:markdown
-[rehypehighlightnpm]: https://www.npmjs.com/search?q=keywords:rehype-highlight
-
 [unified]: https://github.com/unifiedjs/unified
 [micromark]: https://github.com/micromark/micromark
 [remark]: https://github.com/remarkjs/remark
@@ -394,18 +348,23 @@ I like to contribute the Unified / Remark / MDX ecosystem, so I recommend you to
 [rehype]: https://github.com/rehypejs/rehype
 [rehypeplugins]: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md
 [hast]: https://github.com/syntax-tree/hast
-[typescript]: https://www.typescriptlang.org/
 [rehype-highlight]: https://github.com/rehypejs/rehype-highlight
 
 [badge-npm-version]: https://img.shields.io/npm/v/rehype-highlight-code-lines
 [badge-npm-download]:https://img.shields.io/npm/dt/rehype-highlight-code-lines
-[npm-package-url]: https://www.npmjs.com/package/rehype-highlight-code-lines
+[url-npm-package]: https://www.npmjs.com/package/rehype-highlight-code-lines
+[url-github-package]: https://github.com/ipikuka/rehype-highlight-code-lines
 
 [badge-license]: https://img.shields.io/github/license/ipikuka/rehype-highlight-code-lines
-[github-license-url]: https://github.com/ipikuka/rehype-highlight-code-lines/blob/main/LICENSE
+[url-license]: https://github.com/ipikuka/rehype-highlight-code-lines/blob/main/LICENSE
 
-[badge-build]: https://github.com/ipikuka/rehype-highlight-code-lines/actions/workflows/publish.yml/badge.svg
-[github-workflow-url]: https://github.com/ipikuka/rehype-highlight-code-lines/actions/workflows/publish.yml
+[badge-publish-to-npm]: https://github.com/ipikuka/rehype-highlight-code-lines/actions/workflows/publish.yml/badge.svg
+[url-publish-github-actions]: https://github.com/ipikuka/rehype-highlight-code-lines/actions/workflows/publish.yml
 
 [badge-typescript]: https://img.shields.io/npm/types/rehype-highlight-code-lines
-[typescript-url]: https://www.typescriptlang.org/
+[url-typescript]: https://www.typescriptlang.org
+
+[badge-codecov]: https://codecov.io/gh/ipikuka/rehype-highlight-code-lines/graph/badge.svg?token=RKrZlvMHwq
+[url-codecov]: https://codecov.io/gh/ipikuka/rehype-highlight-code-lines
+
+[badge-type-coverage]: https://img.shields.io/badge/dynamic/json.svg?label=type-coverage&prefix=%E2%89%A5&suffix=%&query=$.typeCoverage.atLeast&uri=https%3A%2F%2Fraw.githubusercontent.com%2Fipikuka%2Frehype-highlight-code-lines%2Fmain%2Fpackage.json

package/dist/esm/index.d.ts

@@ -2,12 +2,16 @@ import type { Plugin } from "unified";
 import type { Root } from "hast";
 export type HighlightLinesOptions = {
     showLineNumbers?: boolean;
+    /**
+     * @deprecated container tag name is always "span"
+     * will be removed in the next versions
+     */
     lineContainerTagName?: "div" | "span";
 };
 export declare function clsx(arr: (string | false | null | undefined | 0)[]): string[];
 /**
  *
- * adds line numbers to code blocks and allow highlighting of desired code lines
+ * add line numbers to code blocks and allow highlighting of desired code lines
  *
  */
 declare const plugin: Plugin<[HighlightLinesOptions?], Root>;

package/dist/esm/index.js

@@ -1,4 +1,4 @@
-import { visit, CONTINUE } from "unist-util-visit";
+import { visit } from "unist-util-visit";
 import rangeParser from "parse-numeric-range";
 const DEFAULT_SETTINGS = {
     showLineNumbers: false,
@@ -10,44 +10,62 @@ export function clsx(arr) {
 }
 /**
  *
- * adds line numbers to code blocks and allow highlighting of desired code lines
+ * add line numbers to code blocks and allow highlighting of desired code lines
  *
  */
 const plugin = (options) => {
     const settings = Object.assign({}, DEFAULT_SETTINGS, options);
     /**
      *
-     * flatten code element children
+     * check code element children need flattening or not
+     *
+     */
+    function checkCodeTreeForFlatteningNeed(code) {
+        const elementContents = code.children;
+        // type ElementContent = Comment | Element | Text
+        for (const elemenContent of elementContents) {
+            if (elemenContent.type === "element")
+                if (elemenContent.children.length >= 1 && elemenContent.children[0].type === "element")
+                    return true;
+        }
+        return false;
+    }
+    /**
+     *
+     * flatten code element children, recursively
      * inspired from https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/highlight.js
      *
      */
-    function flattenCodeTree(children, className = [], newTree = []) {
-        for (let i = 0; i < children.length; i++) {
-            const node = children[i];
-            if (node.type !== "element") {
-                newTree = newTree.concat([node]);
+    function flattenCodeTree(code, className = []) {
+        const newTree = [];
+        for (const elementContent of code.children) {
+            if (elementContent.type === "comment" || elementContent.type === "text") {
+                newTree.push(elementContent);
             }
             else {
-                // @ts-expect-error
+                // @ts-expect-error className is different from other key of properties, and expected to be an array or undefined
                 // /* v8 ignore next */
-                const classNames = className.concat(node.properties?.className || []);
-                if (node.children.length === 1 && node.children[0].type !== "element") {
-                    node.properties.className = classNames;
-                    newTree = newTree.concat([node]);
+                const classNames = className.concat(elementContent.properties.className || []);
+                if (elementContent.children.length === 1 &&
+                    elementContent.children[0].type !== "element") {
+                    elementContent.properties.className = classNames;
+                    newTree.push(elementContent);
                 }
                 else {
-                    newTree = newTree.concat(flattenCodeTree(node.children, classNames));
+                    newTree.push(...flattenCodeTree(elementContent, classNames));
                 }
             }
         }
+        // Mutate the original code object
+        code.children = newTree;
         return newTree;
     }
     /**
      *
-     * constructs the line element
+     * construct the line element
      *
      */
-    const createLine = (children, lineNumber, startingNumber, showLineNumbers, linesToBeHighlighted) => {
+    const createLine = (children, lineNumber, startingNumber, directiveShowLineNumbers, linesToBeHighlighted) => {
         const firstChild = children[0];
         const isAddition = firstChild?.type === "element" &&
             Array.isArray(firstChild.properties.className) &&
@@ -57,23 +75,32 @@ const plugin = (options) => {
             firstChild.properties.className.some((cls) => typeof cls === "string" && cls.includes("deletion"));
         return {
             type: "element",
-            tagName: settings.lineContainerTagName,
+            tagName: "span", // now it is always "span"
             children,
             properties: {
                 className: clsx([
                     "code-line",
-                    showLineNumbers && "numbered-code-line",
+                    directiveShowLineNumbers && "numbered-code-line",
                     linesToBeHighlighted.includes(lineNumber) && "highlighted-code-line",
                     isAddition && "inserted",
                     isDeletion && "deleted",
                 ]),
-                dataLineNumber: showLineNumbers ? startingNumber - 1 + lineNumber : undefined,
+                dataLineNumber: directiveShowLineNumbers ? startingNumber - 1 + lineNumber : undefined,
             },
         };
     };
     // match all common types of line breaks
-    const RE = /\r?\n|\r/g;
-    function gutter(tree, showLineNumbers, startingNumber, linesToBeHighlighted) {
+    const REGEX_LINE_BREAKS = /\r?\n|\r/g;
+    /**
+     *
+     * check the code line is empty or with value only spaces
+     *
+     */
+    function isEmptyLine(line) {
+        return (line.length === 0 ||
+            (line.length === 1 && line[0].type === "text" && line[0].value.trim() === ""));
+    }
+    function gutter(tree, directiveShowLineNumbers, startingNumber, linesToBeHighlighted) {
         const replacement = [];
         let index = -1;
         let start = 0;
@@ -81,56 +108,72 @@ const plugin = (options) => {
         let lineNumber = 0;
         while (++index < tree.children.length) {
             const child = tree.children[index];
-            if (child.type === "text") {
-                let textStart = 0;
-                let match = RE.exec(child.value);
-                while (match) {
-                    // Nodes in this line. (current child is exclusive)
-                    const line = tree.children.slice(start, index);
-                    /* v8 ignore start */
-                    // Prepend text from a partial matched earlier text.
-                    if (startTextRemainder) {
-                        line.unshift({ type: "text", value: startTextRemainder });
-                        startTextRemainder = "";
-                    }
-                    /* v8 ignore end */
-                    // Append text from this text.
-                    if (match.index > textStart) {
-                        const value = child.value.slice(textStart, match.index);
-                        line.push({ type: "text", value });
-                    }
-                    // Add a line
-                    lineNumber += 1;
-                    replacement.push(createLine(line, lineNumber, startingNumber, showLineNumbers, linesToBeHighlighted));
-                    // Add eol if the tag name is "span"
-                    if (settings.lineContainerTagName === "span") {
-                        replacement.push({ type: "text", value: match[0] });
-                    }
-                    start = index + 1;
-                    textStart = match.index + match[0].length;
-                    match = RE.exec(child.value);
+            if (child.type !== "text")
+                continue;
+            let textStart = 0;
+            let match = REGEX_LINE_BREAKS.exec(child.value);
+            while (match !== null) {
+                // Nodes in this line. (current child is exclusive)
+                const line = tree.children.slice(start, index);
+                // Prepend text from a partial matched earlier text.
+                if (startTextRemainder) {
+                    line.unshift({ type: "text", value: startTextRemainder });
+                    startTextRemainder = "";
+                }
+                // Append text from this text.
+                if (match.index > textStart) {
+                    const value = child.value.slice(textStart, match.index);
+                    line.push({ type: "text", value });
                 }
-                // If we matched, make sure to not drop the text after the last line ending.
-                if (start === index + 1) {
-                    startTextRemainder = child.value.slice(textStart);
+                if (!isEmptyLine(line)) {
+                    lineNumber += 1;
+                    replacement.push(createLine(line, lineNumber, startingNumber, directiveShowLineNumbers, linesToBeHighlighted));
                 }
+                // Add eol
+                replacement.push({ type: "text", value: match[0] });
+                start = index + 1;
+                textStart = match.index + match[0].length;
+                // iterate the match
+                match = REGEX_LINE_BREAKS.exec(child.value);
+            }
+            // If we matched, make sure to not drop the text after the last line ending.
+            if (start === index + 1) {
+                startTextRemainder = child.value.slice(textStart);
             }
         }
         const line = tree.children.slice(start);
-        /* v8 ignore start */
         // Prepend text from a partial matched earlier text.
         if (startTextRemainder) {
             line.unshift({ type: "text", value: startTextRemainder });
             startTextRemainder = "";
         }
-        if (line.length > 0) {
-            lineNumber += 1;
-            replacement.push(createLine(line, lineNumber, startingNumber, showLineNumbers, linesToBeHighlighted));
+        if (!isEmptyLine(line)) {
+            if (line.length > 0) {
+                lineNumber += 1;
+                replacement.push(createLine(line, lineNumber, startingNumber, directiveShowLineNumbers, linesToBeHighlighted));
+            }
         }
-        /* v8 ignore end */
         // Replace children with new array.
         tree.children = replacement;
     }
+    /**
+     *
+     * get the programming language analyzing the classNames
+     *
+     */
+    function getLanguage(classNames) {
+        const isLanguageString = (element) => {
+            return String(element).startsWith("language-") || String(element).startsWith("lang-");
+        };
+        const languageString = classNames?.find(isLanguageString);
+        if (languageString?.slice(0, 5) === "lang-") {
+            return languageString.slice(5).toLowerCase();
+        }
+        if (languageString?.slice(0, 9) === "language-") {
+            return languageString.slice(9).toLowerCase();
+        }
+        return languageString;
+    }
     /**
      * Transform.
      *
@@ -141,48 +184,34 @@ const plugin = (options) => {
      */
     return (tree) => {
         visit(tree, "element", function (node, index, parent) {
-            /* v8 ignore next */
-            if (!parent || typeof index === "undefined")
+            if (!parent || index === undefined || node.tagName !== "code") {
                 return;
-            if (node.tagName !== "pre")
-                return CONTINUE;
-            const code = node.children[0];
-            /* v8 ignore next */
-            if (!code || code.type !== "element" || code.tagName !== "code")
-                return;
-            let meta = code.data?.meta?.toLowerCase().trim();
-            // handle if there is no language provided in code block
-            if (Array.isArray(code.properties.className)) {
-                const testingFunction = (element) => typeof element === "string" && element.startsWith("language-");
-                const className = code.properties.className.find(testingFunction);
-                if (className) {
-                    const language = className.slice(9).toLowerCase();
-                    if (language.startsWith("{") ||
-                        language.startsWith("showlinenumbers") ||
-                        language.startsWith("nolinenumbers")) {
-                        meta = meta ? language + meta : language;
-                        const idx = code.properties.className.findIndex(testingFunction);
-                        if (idx > -1) {
-                            code.properties.className[idx] = "language-unknown";
-                        }
-                    }
-                }
             }
-            if (settings.showLineNumbers) {
-                if (!meta) {
-                    meta = "showlinenumbers";
-                }
-                else if (!meta.includes("showlinenumbers")) {
-                    meta = meta + " showlinenumbers";
-                }
+            if (parent.type !== "element" || parent.tagName !== "pre") {
+                return;
             }
-            if (!meta)
+            const code = node;
+            const classNames = code.properties.className;
+            // only for type narrowing
+            /* v8 ignore next */
+            if (!Array.isArray(classNames) && classNames !== undefined)
                 return;
-            const showLineNumbers = meta.includes("nolinenumbers")
+            let meta = code.data?.meta?.toLowerCase().trim() || "";
+            const language = getLanguage(classNames);
+            if (language?.startsWith("{") ||
+                language?.startsWith("showlinenumbers") ||
+                language?.startsWith("nolinenumbers")) {
+                // add specifiers to meta
+                meta = (language + " " + meta).trim();
+                // remove all classnames like hljs, lang-x, language-x, because of false positive
+                code.properties.className = undefined;
+            }
+            const directiveShowLineNumbers = meta.includes("nolinenumbers")
                 ? false
-                : meta.includes("showlinenumbers");
+                : settings.showLineNumbers || meta.includes("showlinenumbers");
             let startingNumber = 1;
-            if (showLineNumbers) {
+            // find the number where the line number starts, if exists
+            if (directiveShowLineNumbers) {
                 const REGEX1 = /showlinenumbers=(?<start>\d+)/i;
                 const start = REGEX1.exec(meta)?.groups?.start;
                 if (start && !isNaN(Number(start)))
@@ -192,12 +221,15 @@ const plugin = (options) => {
             const REGEX2 = /{(?<lines>[\d\s,-]+)}/g;
             const strLineNumbers = REGEX2.exec(meta)?.groups?.lines?.replace(/\s/g, "");
             const linesToBeHighlighted = strLineNumbers ? rangeParser(strLineNumbers) : [];
-            if (!showLineNumbers && linesToBeHighlighted.length === 0)
+            // if nothing to do for numbering and highlihting, just return
+            if (!directiveShowLineNumbers && linesToBeHighlighted.length === 0)
                 return;
-            // flatten deeper nodes into first level <span>s an texts
-            code.children = flattenCodeTree(code.children);
-            // add wrapper for each line mutating the code element
-            gutter(code, showLineNumbers, startingNumber, linesToBeHighlighted);
+            // flatten deeper nodes into first level <span> and text, especially for languages like jsx, tsx
+            if (checkCodeTreeForFlatteningNeed(code)) {
+                flattenCodeTree(code);
+            }
+            // add container for each line mutating the code element
+            gutter(code, directiveShowLineNumbers, startingNumber, linesToBeHighlighted);
         });
     };
 };

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["../../src/index.ts"],"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rehype-highlight-code-lines",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines",
   "type": "module",
   "exports": "./dist/esm/index.js",
@@ -13,7 +13,7 @@
     "lint": "eslint .",
     "test": "vitest --watch=false",
     "test:watch": "vitest",
-    "test:file": "vitest test.spec.ts",
+    "test:file": "vitest test.html.spec.ts",
     "prepack": "npm run build",
     "prepublishOnly": "npm run test && npm run format && npm run test-coverage",
     "test-coverage": "vitest run --coverage"
@@ -30,12 +30,17 @@
   },
   "keywords": [
     "unified",
-    "hast",
     "rehype",
+    "hast",
     "markdown",
+    "mdx",
     "plugin",
-    "rehype-plugin",
-    "rehype-highlight",
+    "highlight",
+    "highlighting",
+    "rehype plugin",
+    "rehype highlight",
+    "code highlighting",
+    "syntax highlighting",
     "line numbering",
     "line highlighting"
   ],
@@ -46,26 +51,30 @@
     "url": "https://github.com/ipikuka/rehype-highlight-code-lines/issues"
   },
   "devDependencies": {
+    "@eslint/js": "^9.19.0",
     "@types/dedent": "^0.7.2",
-    "@types/node": "^20.14.8",
-    "@typescript-eslint/eslint-plugin": "^7.13.1",
-    "@typescript-eslint/parser": "^7.13.1",
-    "@vitest/coverage-v8": "^1.6.0",
+    "@types/node": "^22.13.1",
+    "@vitest/coverage-v8": "^3.0.5",
+    "@vitest/eslint-plugin": "^1.1.25",
     "dedent": "^1.5.3",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "prettier": "^3.3.2",
-    "rehype-highlight": "^7.0.0",
-    "rehype-stringify": "^10.0.0",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
+    "prettier": "^3.4.2",
+    "rehype": "^13.0.2",
+    "rehype-highlight": "^7.0.2",
+    "rehype-parse": "^9.0.1",
+    "rehype-stringify": "^10.0.1",
     "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
-    "remark-rehype": "^11.1.0",
-    "rimraf": "^5.0.7",
-    "type-coverage": "^2.29.0",
-    "typescript": "^5.5",
-    "vfile": "^6.0.1",
-    "vitest": "^1.4.0"
+    "remark-rehype": "^11.1.1",
+    "rimraf": "^5.0.10",
+    "type-coverage": "^2.29.7",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.23.0",
+    "unist-util-remove-position": "^5.0.0",
+    "vfile": "^6.0.3",
+    "vitest": "^3.0.5"
   },
   "dependencies": {
     "@types/hast": "^3.0.4",
@@ -77,7 +86,6 @@
     "atLeast": 100,
     "detail": true,
     "ignoreAsAssertion": true,
-    "ignoreCatch": true,
     "strict": true
   },
   "sideEffects": false

package/src/index.ts

@@ -1,16 +1,18 @@
 import type { Plugin } from "unified";
 import type { Root, Element, ElementContent, ElementData } from "hast";
-import { type VisitorResult, visit, CONTINUE } from "unist-util-visit";
+import { visit, type VisitorResult } from "unist-util-visit";
 import rangeParser from "parse-numeric-range";
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 type Prettify<T> = { [K in keyof T]: T[K] } & {};
 
-// eslint-disable-next-line @typescript-eslint/ban-types
 type PartiallyRequired<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;
 
 export type HighlightLinesOptions = {
   showLineNumbers?: boolean;
+  /**
+   * @deprecated container tag name is always "span"
+   * will be removed in the next versions
+   */
   lineContainerTagName?: "div" | "span";
 };
 
@@ -34,7 +36,7 @@ export function clsx(arr: (string | false | null | undefined | 0)[]): string[] {
 
 /**
  *
- * adds line numbers to code blocks and allow highlighting of desired code lines
+ * add line numbers to code blocks and allow highlighting of desired code lines
  *
  */
 const plugin: Plugin<[HighlightLinesOptions?], Root> = (options) => {
@@ -46,45 +48,66 @@ const plugin: Plugin<[HighlightLinesOptions?], Root> = (options) => {
 
   /**
    *
-   * flatten code element children
+   * check code element children need flattening or not
+   *
+   */
+  function checkCodeTreeForFlatteningNeed(code: Element): boolean {
+    const elementContents = code.children;
+
+    // type ElementContent = Comment | Element | Text
+    for (const elemenContent of elementContents) {
+      if (elemenContent.type === "element")
+        if (elemenContent.children.length >= 1 && elemenContent.children[0].type === "element")
+          return true;
+    }
+
+    return false;
+  }
+
+  /**
+   *
+   * flatten code element children, recursively
    * inspired from https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/src/highlight.js
    *
    */
-  function flattenCodeTree(
-    children: ElementContent[],
-    className: string[] = [],
-    newTree: ElementContent[] = [],
-  ): ElementContent[] {
-    for (let i = 0; i < children.length; i++) {
-      const node = children[i];
-      if (node.type !== "element") {
-        newTree = newTree.concat([node]);
+  function flattenCodeTree(code: Element, className: string[] = []): ElementContent[] {
+    const newTree: ElementContent[] = [];
+
+    for (const elementContent of code.children) {
+      if (elementContent.type === "comment" || elementContent.type === "text") {
+        newTree.push(elementContent);
       } else {
-        // @ts-expect-error
+        // @ts-expect-error className is different from other key of properties, and expected to be an array or undefined
         // /* v8 ignore next */
-        const classNames = className.concat(node.properties?.className || []);
-
-        if (node.children.length === 1 && node.children[0].type !== "element") {
-          node.properties.className = classNames;
-          newTree = newTree.concat([node]);
+        const classNames = className.concat(elementContent.properties.className || []);
+
+        if (
+          elementContent.children.length === 1 &&
+          elementContent.children[0].type !== "element"
+        ) {
+          elementContent.properties.className = classNames;
+          newTree.push(elementContent);
         } else {
-          newTree = newTree.concat(flattenCodeTree(node.children, classNames));
+          newTree.push(...flattenCodeTree(elementContent, classNames));
         }
       }
     }
+
+    // Mutate the original code object
+    code.children = newTree;
     return newTree;
   }
 
   /**
    *
-   * constructs the line element
+   * construct the line element
    *
    */
   const createLine = (
     children: ElementContent[],
     lineNumber: number,
     startingNumber: number,
-    showLineNumbers: boolean,
+    directiveShowLineNumbers: boolean,
     linesToBeHighlighted: number[],
   ): Element => {
     const firstChild = children[0];
@@ -105,31 +128,43 @@ const plugin: Plugin<[HighlightLinesOptions?], Root> = (options) => {
 
     return {
       type: "element",
-      tagName: settings.lineContainerTagName,
+      tagName: "span", // now it is always "span"
       children,
       properties: {
         className: clsx([
           "code-line",
-          showLineNumbers && "numbered-code-line",
+          directiveShowLineNumbers && "numbered-code-line",
           linesToBeHighlighted.includes(lineNumber) && "highlighted-code-line",
           isAddition && "inserted",
           isDeletion && "deleted",
         ]),
-        dataLineNumber: showLineNumbers ? startingNumber - 1 + lineNumber : undefined,
+        dataLineNumber: directiveShowLineNumbers ? startingNumber - 1 + lineNumber : undefined,
       },
     };
   };
 
   // match all common types of line breaks
-  const RE = /\r?\n|\r/g;
+  const REGEX_LINE_BREAKS = /\r?\n|\r/g;
+
+  /**
+   *
+   * check the code line is empty or with value only spaces
+   *
+   */
+  function isEmptyLine(line: ElementContent[]): boolean {
+    return (
+      line.length === 0 ||
+      (line.length === 1 && line[0].type === "text" && line[0].value.trim() === "")
+    );
+  }
 
   function gutter(
     tree: Element,
-    showLineNumbers: boolean,
+    directiveShowLineNumbers: boolean,
     startingNumber: number,
     linesToBeHighlighted: number[],
   ) {
-    const replacement: Array<ElementContent> = [];
+    const replacement: ElementContent[] = [];
 
     let index = -1;
     let start = 0;
@@ -139,76 +174,106 @@ const plugin: Plugin<[HighlightLinesOptions?], Root> = (options) => {
     while (++index < tree.children.length) {
       const child = tree.children[index];
 
-      if (child.type === "text") {
-        let textStart = 0;
-        let match = RE.exec(child.value);
-
-        while (match) {
-          // Nodes in this line. (current child is exclusive)
-          const line = tree.children.slice(start, index);
+      if (child.type !== "text") continue;
 
-          /* v8 ignore start */
+      let textStart = 0;
+      let match = REGEX_LINE_BREAKS.exec(child.value);
 
-          // Prepend text from a partial matched earlier text.
-          if (startTextRemainder) {
-            line.unshift({ type: "text", value: startTextRemainder });
-            startTextRemainder = "";
-          }
+      while (match !== null) {
+        // Nodes in this line. (current child is exclusive)
+        const line = tree.children.slice(start, index);
 
-          /* v8 ignore end */
+        // Prepend text from a partial matched earlier text.
+        if (startTextRemainder) {
+          line.unshift({ type: "text", value: startTextRemainder });
+          startTextRemainder = "";
+        }
 
-          // Append text from this text.
-          if (match.index > textStart) {
-            const value = child.value.slice(textStart, match.index);
-            line.push({ type: "text", value });
-          }
+        // Append text from this text.
+        if (match.index > textStart) {
+          const value = child.value.slice(textStart, match.index);
+          line.push({ type: "text", value });
+        }
 
-          // Add a line
+        if (!isEmptyLine(line)) {
           lineNumber += 1;
           replacement.push(
-            createLine(line, lineNumber, startingNumber, showLineNumbers, linesToBeHighlighted),
+            createLine(
+              line,
+              lineNumber,
+              startingNumber,
+              directiveShowLineNumbers,
+              linesToBeHighlighted,
+            ),
           );
+        }
 
-          // Add eol if the tag name is "span"
-          if (settings.lineContainerTagName === "span") {
-            replacement.push({ type: "text", value: match[0] });
-          }
+        // Add eol
+        replacement.push({ type: "text", value: match[0] });
 
-          start = index + 1;
-          textStart = match.index + match[0].length;
-          match = RE.exec(child.value);
-        }
+        start = index + 1;
+        textStart = match.index + match[0].length;
 
-        // If we matched, make sure to not drop the text after the last line ending.
-        if (start === index + 1) {
-          startTextRemainder = child.value.slice(textStart);
-        }
+        // iterate the match
+        match = REGEX_LINE_BREAKS.exec(child.value);
+      }
+
+      // If we matched, make sure to not drop the text after the last line ending.
+      if (start === index + 1) {
+        startTextRemainder = child.value.slice(textStart);
       }
     }
 
     const line = tree.children.slice(start);
 
-    /* v8 ignore start */
-
     // Prepend text from a partial matched earlier text.
     if (startTextRemainder) {
       line.unshift({ type: "text", value: startTextRemainder });
       startTextRemainder = "";
     }
 
-    if (line.length > 0) {
-      lineNumber += 1;
-      replacement.push(
-        createLine(line, lineNumber, startingNumber, showLineNumbers, linesToBeHighlighted),
-      );
+    if (!isEmptyLine(line)) {
+      if (line.length > 0) {
+        lineNumber += 1;
+        replacement.push(
+          createLine(
+            line,
+            lineNumber,
+            startingNumber,
+            directiveShowLineNumbers,
+            linesToBeHighlighted,
+          ),
+        );
+      }
     }
 
-    /* v8 ignore end */
-
     // Replace children with new array.
     tree.children = replacement;
   }
 
+  /**
+   *
+   * get the programming language analyzing the classNames
+   *
+   */
+  function getLanguage(classNames: (string | number)[] | undefined): string | undefined {
+    const isLanguageString = (element: string | number): element is string => {
+      return String(element).startsWith("language-") || String(element).startsWith("lang-");
+    };
+
+    const languageString = classNames?.find(isLanguageString);
+
+    if (languageString?.slice(0, 5) === "lang-") {
+      return languageString.slice(5).toLowerCase();
+    }
+
+    if (languageString?.slice(0, 9) === "language-") {
+      return languageString.slice(9).toLowerCase();
+    }
+
+    return languageString;
+  }
+
   /**
    * Transform.
    *
@@ -219,61 +284,46 @@ const plugin: Plugin<[HighlightLinesOptions?], Root> = (options) => {
    */
   return (tree: Root): undefined => {
     visit(tree, "element", function (node, index, parent): VisitorResult {
-      /* v8 ignore next */
-      if (!parent || typeof index === "undefined") return;
-
-      if (node.tagName !== "pre") return CONTINUE;
-
-      const code = node.children[0];
-
-      /* v8 ignore next */
-      if (!code || code.type !== "element" || code.tagName !== "code") return;
+      if (!parent || index === undefined || node.tagName !== "code") {
+        return;
+      }
 
-      let meta = (code.data as CodeData)?.meta?.toLowerCase().trim();
+      if (parent.type !== "element" || parent.tagName !== "pre") {
+        return;
+      }
 
-      // handle if there is no language provided in code block
-      if (Array.isArray(code.properties.className)) {
-        const testingFunction = (element: string | number): element is string =>
-          typeof element === "string" && element.startsWith("language-");
+      const code = node;
 
-        const className = code.properties.className.find(testingFunction);
+      const classNames = code.properties.className;
 
-        if (className) {
-          const language = className.slice(9).toLowerCase();
+      // only for type narrowing
+      /* v8 ignore next */
+      if (!Array.isArray(classNames) && classNames !== undefined) return;
 
-          if (
-            language.startsWith("{") ||
-            language.startsWith("showlinenumbers") ||
-            language.startsWith("nolinenumbers")
-          ) {
-            meta = meta ? language + meta : language;
+      let meta = (code.data as CodeData)?.meta?.toLowerCase().trim() || "";
 
-            const idx = code.properties.className.findIndex(testingFunction);
+      const language = getLanguage(classNames);
 
-            if (idx > -1) {
-              code.properties.className[idx] = "language-unknown";
-            }
-          }
-        }
-      }
+      if (
+        language?.startsWith("{") ||
+        language?.startsWith("showlinenumbers") ||
+        language?.startsWith("nolinenumbers")
+      ) {
+        // add specifiers to meta
+        meta = (language + " " + meta).trim();
 
-      if (settings.showLineNumbers) {
-        if (!meta) {
-          meta = "showlinenumbers";
-        } else if (!meta.includes("showlinenumbers")) {
-          meta = meta + " showlinenumbers";
-        }
+        // remove all classnames like hljs, lang-x, language-x, because of false positive
+        code.properties.className = undefined;
       }
 
-      if (!meta) return;
-
-      const showLineNumbers = meta.includes("nolinenumbers")
+      const directiveShowLineNumbers = meta.includes("nolinenumbers")
         ? false
-        : meta.includes("showlinenumbers");
+        : settings.showLineNumbers || meta.includes("showlinenumbers");
 
       let startingNumber = 1;
 
-      if (showLineNumbers) {
+      // find the number where the line number starts, if exists
+      if (directiveShowLineNumbers) {
         const REGEX1 = /showlinenumbers=(?<start>\d+)/i;
         const start = REGEX1.exec(meta)?.groups?.start;
         if (start && !isNaN(Number(start))) startingNumber = Number(start);
@@ -284,13 +334,16 @@ const plugin: Plugin<[HighlightLinesOptions?], Root> = (options) => {
       const strLineNumbers = REGEX2.exec(meta)?.groups?.lines?.replace(/\s/g, "");
       const linesToBeHighlighted = strLineNumbers ? rangeParser(strLineNumbers) : [];
 
-      if (!showLineNumbers && linesToBeHighlighted.length === 0) return;
+      // if nothing to do for numbering and highlihting, just return
+      if (!directiveShowLineNumbers && linesToBeHighlighted.length === 0) return;
 
-      // flatten deeper nodes into first level <span>s an texts
-      code.children = flattenCodeTree(code.children);
+      // flatten deeper nodes into first level <span> and text, especially for languages like jsx, tsx
+      if (checkCodeTreeForFlatteningNeed(code)) {
+        flattenCodeTree(code);
+      }
 
-      // add wrapper for each line mutating the code element
-      gutter(code, showLineNumbers, startingNumber, linesToBeHighlighted);
+      // add container for each line mutating the code element
+      gutter(code, directiveShowLineNumbers, startingNumber, linesToBeHighlighted);
     });
   };
 };