rehype-highlight-code-lines 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 ipikuka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,245 @@
+# 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]
+
+This package is a [unified][unified] ([rehype][rehype]) plugin **to add wrapper to each line in a code block, allowing numbering of the code block and highlighting desired lines of code**.
+
+**[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.**
+
+## 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 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**. 
+
+> [!IMPORTANT]
+> If the code highlighter already provides numbering and highlighting code lines, don't use `rehype-highlight-code-lines`!
+> \
+> \
+> You can use `rehype-highlight-code-lines` even without a code highlighter.
+
+## Installation
+
+This package is suitable for ESM only. In Node.js (version 16+), install with npm:
+
+```bash
+npm install rehype-highlight-code-lines
+```
+
+or
+
+```bash
+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.
+
+**\`\`\`[language] {2,4-6} showLineNumbers**
+
+**\`\`\`[language] showLineNumbers {2}**
+
+**\`\`\`[language] {1-3}**
+
+**\`\`\`[language] showLineNumbers**
+
+You can use the specifiers without a language.
+
+**\`\`\`{5} showLineNumbers**
+
+**\`\`\`showLineNumbers {5}**
+
+**\`\`\`{2,3}**
+
+**\`\`\`showLineNumbers**
+
+Say we have the following markdown file, `example.md`:
+
+````markdown
+```javascript {2} showLineNumbers
+let a1;
+let a2;
+let a3;
+```
+````
+
+I assume you use `rehype-highlight` for code highlighting. Our module, `example.js`, looks as follows:
+
+```javascript
+import { read } from "to-vfile";
+import remark from "remark";
+import gfm from "remark-gfm";
+import remarkRehype from "remark-rehype";
+import rehypeHighlight from "rehype-highlight";
+import rehypeHighlightLines from "rehype-highlight-code-lines";
+import rehypeStringify from "rehype-stringify";
+
+main();
+
+async function main() {
+  const file = await remark()
+    .use(gfm)
+    .use(remarkRehype)
+    .use(rehypeHighlight)
+    .use(rehypeHighlightLines)
+    .use(rehypeStringify)
+    .process(await read("example.md"));
+
+  console.log(String(file));
+}
+```
+
+Now, running `node example.js` you will see that each line of code is wrapped in a `div`, which has appropriate class names (`code-line`, `numbered-code-line`, `highlighted-code-line`)  and line numbering attribute `data-line-number`.
+
+```html
+<pre>
+  <code class="hljs language-javascript">
+    <div class="code-line numbered-code-line" data-line-number="1">
+      <span class="hljs-keyword">let</span> a1;
+    </div>
+    <div
+      class="code-line numbered-code-line highlighted-code-line" data-line-number="2">
+      <span class="hljs-keyword">let</span> a2;
+    </div>
+    <div class="code-line numbered-code-line" data-line-number="3">
+      <span class="hljs-keyword">let</span> a3;
+    </div>
+  </code>
+</pre>
+```
+
+Without `rehype-highlight-code-lines`, the lines of code wouldn't be in a `div`.
+
+```html
+<pre>
+  <code class="hljs language-javascript">
+    <span class="hljs-keyword">let</span> a1;
+    <span class="hljs-keyword">let</span> a2;
+    <span class="hljs-keyword">let</span> a3;
+  </code>
+</pre>
+```
+
+## Options
+
+There is one **boolean** option. 
+
+```typescript
+type HighlightLinesOptions = {
+  showLineNumbers?: boolean; // the default is "false"
+};
+
+use(rehypeHighlightLines, HighlightLinesOptions);
+```
+
+### Examples:
+
+```typescript
+use(rehypeHighlightLines);
+
+// all code blocks will be numbered in MDX/markdown source
+use(rehypeHighlightLines, {showLineNumbers: true});
+```
+
+## Syntax tree
+
+This plugin modifies the `hast` (HTML abstract syntax tree).
+
+## Types
+
+This package is fully typed with [TypeScript][typescript].
+
+The plugin exports the type `HighlightLinesOptions`.
+
+## Compatibility
+
+This plugin works with `rehype-parse` version 1+, `rehype-stringify` version 1+, `rehype` version 1+, and unified version `4+`.
+
+## Security
+
+Use of `rehype-highlight-code-lines` involves rehype (hast), but doesn't lead to cross-site scripting (XSS) attacks.
+
+## My Plugins
+
+I like to contribute the Unified / Remark / MDX ecosystem, so I recommend you to have a look my plugins.
+
+### My Remark Plugins
+
+- [`remark-flexible-code-titles`](https://www.npmjs.com/package/remark-flexible-code-titles)
+  – Remark plugin to add titles or/and containers for the code blocks with customizable properties
+- [`remark-flexible-containers`](https://www.npmjs.com/package/remark-flexible-containers)
+  – Remark plugin to add custom containers with customizable properties in markdown
+- [`remark-ins`](https://www.npmjs.com/package/remark-ins)
+  – Remark plugin to add `ins` element in markdown
+- [`remark-flexible-paragraphs`](https://www.npmjs.com/package/remark-flexible-paragraphs)
+  – Remark plugin to add custom paragraphs with customizable properties in markdown
+- [`remark-flexible-markers`](https://www.npmjs.com/package/remark-flexible-markers)
+  – Remark plugin to add custom `mark` element with customizable properties in markdown
+- [`remark-flexible-toc`](https://www.npmjs.com/package/remark-flexible-toc)
+  – Remark plugin to expose the table of contents via `vfile.data` or via an option reference
+- [`remark-mdx-remove-esm`](https://www.npmjs.com/package/remark-mdx-remove-esm)
+  – Remark plugin to remove import and/or export statements (mdxjsEsm)
+
+### My Rehype Plugins
+
+- [`rehype-pre-language`](https://www.npmjs.com/package/rehype-pre-language)
+  – Rehype plugin to add language information as a property to `pre` element
+- [`rehype-highlight-code-lines`](https://www.npmjs.com/package/rehype-highlight-code-lines)
+  – Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines
+
+### My Recma Plugins
+
+- [`recma-mdx-escape-missing-components`](https://www.npmjs.com/package/recma-mdx-escape-missing-components)
+  – Recma plugin to set the default value `() => null` for the Components in MDX in case of missing or not provided so as not to throw an error
+- [`recma-mdx-change-props`](https://www.npmjs.com/package/recma-mdx-change-props)
+  – Recma plugin to change the `props` parameter into the `_props` in the `function _createMdxContent(props) {/* */}` in the compiled source in order to be able to use `{props.foo}` like expressions. It is useful for the `next-mdx-remote` or `next-mdx-remote-client` users in `nextjs` applications.
+
+## License
+
+[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
+[remarkplugins]: https://github.com/remarkjs/remark/blob/main/doc/plugins.md
+[mdast]: https://github.com/syntax-tree/mdast
+[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
+
+[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
+
+[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-typescript]: https://img.shields.io/npm/types/rehype-highlight-code-lines
+[typescript-url]: https://www.typescriptlang.org/

package/dist/esm/index.d.ts

@@ -0,0 +1,13 @@
+import type { Plugin } from "unified";
+import type { Root } from "hast";
+export type HighlightLinesOptions = {
+    showLineNumbers?: boolean;
+};
+export declare function clsx(arr: (string | false | null | undefined | 0)[]): string[];
+/**
+ *
+ * adds line numbers to code blocks and allow highlighting of desired code lines
+ *
+ */
+declare const plugin: Plugin<[HighlightLinesOptions?], Root>;
+export default plugin;

package/dist/esm/index.js

@@ -0,0 +1,152 @@
+import { visit, CONTINUE } from "unist-util-visit";
+import rangeParser from "parse-numeric-range";
+const DEFAULT_SETTINGS = {
+    showLineNumbers: false,
+};
+// a simple util for our use case, like clsx package
+export function clsx(arr) {
+    return arr.filter((item) => !!item);
+}
+/**
+ *
+ * adds line numbers to code blocks and allow highlighting of desired code lines
+ *
+ */
+const plugin = (options) => {
+    const settings = Object.assign({}, DEFAULT_SETTINGS, options);
+    /**
+     *
+     * constructs the line element
+     *
+     */
+    const createLine = (children, lineNumber, classNames) => {
+        return {
+            type: "element",
+            tagName: "div",
+            children,
+            properties: {
+                className: classNames,
+                ...(lineNumber && { "data-line-number": lineNumber }),
+            },
+        };
+    };
+    // match all common types of line breaks
+    const RE = /\r?\n|\r/g;
+    function starryNightGutter(tree, showLineNumbers, linesToBeHighlighted) {
+        const replacement = [];
+        let index = -1;
+        let start = 0;
+        let startTextRemainder = "";
+        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.
+                    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) {
+                        line.push({
+                            type: "text",
+                            value: child.value.slice(textStart, match.index),
+                        });
+                    }
+                    // Add a line, and the eol.
+                    lineNumber += 1;
+                    replacement.push(createLine(line, showLineNumbers ? lineNumber : undefined, clsx([
+                        "code-line",
+                        showLineNumbers && "numbered-code-line",
+                        linesToBeHighlighted.includes(lineNumber) && "highlighted-code-line",
+                    ])), {
+                        type: "text",
+                        value: match[0],
+                    });
+                    start = index + 1;
+                    textStart = match.index + match[0].length;
+                    match = RE.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, showLineNumbers ? lineNumber : undefined, clsx([
+                "code-line",
+                showLineNumbers && "numbered-code-line",
+                linesToBeHighlighted.includes(lineNumber) && "highlighted-code-line",
+            ])));
+        }
+        /* v8 ignore end */
+        // Replace children with new array.
+        tree.children = replacement;
+    }
+    /**
+     * Transform.
+     *
+     * @param {Root} tree
+     *   Tree.
+     * @returns {undefined}
+     *   Nothing.
+     */
+    return (tree) => {
+        visit(tree, "element", function (node, index, parent) {
+            /* 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;
+            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")) {
+                        meta = meta ? language + meta : language;
+                        const index = code.properties.className.findIndex(testingFunction);
+                        if (index > -1) {
+                            code.properties.className[index] = "language-unknown";
+                        }
+                    }
+                }
+            }
+            if (!meta)
+                return;
+            const showLineNumbers = settings.showLineNumbers || meta.includes("showlinenumbers");
+            // find number range string within curly braces and parse it
+            const RE = /{(?<lines>[\d\s,-]+)}/g;
+            const strLineNumbers = RE.exec(meta)?.groups?.lines?.replace(/\s/g, "");
+            const linesToBeHighlighted = strLineNumbers ? rangeParser(strLineNumbers) : [];
+            if (!showLineNumbers && linesToBeHighlighted.length === 0)
+                return;
+            // add wrapper for each line mutating the code element
+            starryNightGutter(code, showLineNumbers, linesToBeHighlighted);
+        });
+    };
+};
+export default plugin;
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

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

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "rehype-highlight-code-lines",
+  "version": "0.0.1",
+  "description": "Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines",
+  "type": "module",
+  "exports": "./dist/esm/index.js",
+  "main": "./dist/esm/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "scripts": {
+    "build": "rimraf dist && tsc --build && type-coverage",
+    "format": "npm run prettier && npm run lint",
+    "prettier": "prettier --write .",
+    "lint": "eslint .",
+    "test": "vitest --watch=false",
+    "test:watch": "vitest",
+    "test:file": "vitest test.spec.ts",
+    "prepack": "npm run build",
+    "prepublishOnly": "npm run test && npm run format && npm run test-coverage",
+    "test-coverage": "vitest run --coverage"
+  },
+  "files": [
+    "dist/",
+    "src/",
+    "LICENSE",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ipikuka/rehype-highlight-code-lines.git"
+  },
+  "keywords": [
+    "unified",
+    "hast",
+    "rehype",
+    "markdown",
+    "plugin",
+    "rehype-plugin",
+    "rehype-highlight",
+    "line numbering",
+    "line highlighting"
+  ],
+  "author": "ipikuka <talatkuyuk@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/ipikuka/rehype-highlight-code-lines#readme",
+  "bugs": {
+    "url": "https://github.com/ipikuka/rehype-highlight-code-lines/issues"
+  },
+  "devDependencies": {
+    "@types/dedent": "^0.7.2",
+    "@types/node": "^20.14.2",
+    "@typescript-eslint/eslint-plugin": "^7.13.0",
+    "@typescript-eslint/parser": "^7.13.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "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",
+    "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.4.5",
+    "unified": "^11.0.4",
+    "vfile": "^6.0.1",
+    "vitest": "^1.4.0"
+  },
+  "dependencies": {
+    "@types/hast": "^3.0.4",
+    "parse-numeric-range": "^1.3.0",
+    "unist-util-visit": "^5.0.0"
+  },
+  "typeCoverage": {
+    "atLeast": 100,
+    "detail": true,
+    "ignoreAsAssertion": true,
+    "ignoreCatch": true,
+    "strict": true
+  },
+  "sideEffects": false
+}

package/src/index.ts

@@ -0,0 +1,217 @@
+import type { Plugin } from "unified";
+import type { Root, Element, ElementContent, ElementData } from "hast";
+import { type VisitorResult, visit, CONTINUE } from "unist-util-visit";
+import rangeParser from "parse-numeric-range";
+
+export type HighlightLinesOptions = {
+  showLineNumbers?: boolean;
+};
+
+const DEFAULT_SETTINGS: HighlightLinesOptions = {
+  showLineNumbers: false,
+};
+
+type CodeData = ElementData & {
+  meta?: string;
+};
+
+// a simple util for our use case, like clsx package
+export function clsx(arr: (string | false | null | undefined | 0)[]): string[] {
+  return arr.filter((item): item is string => !!item);
+}
+
+/**
+ *
+ * adds line numbers to code blocks and allow highlighting of desired code lines
+ *
+ */
+const plugin: Plugin<[HighlightLinesOptions?], Root> = (options) => {
+  const settings = Object.assign({}, DEFAULT_SETTINGS, options);
+
+  /**
+   *
+   * constructs the line element
+   *
+   */
+  const createLine = (
+    children: ElementContent[],
+    lineNumber: number | undefined,
+    classNames: string[],
+  ): Element => {
+    return {
+      type: "element",
+      tagName: "div",
+      children,
+      properties: {
+        className: classNames,
+        ...(lineNumber && { "data-line-number": lineNumber }),
+      },
+    };
+  };
+
+  // match all common types of line breaks
+  const RE = /\r?\n|\r/g;
+
+  function starryNightGutter(
+    tree: Element,
+    showLineNumbers: boolean,
+    linesToBeHighlighted: number[],
+  ) {
+    const replacement: Array<ElementContent> = [];
+    let index = -1;
+    let start = 0;
+    let startTextRemainder = "";
+    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.
+          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) {
+            line.push({
+              type: "text",
+              value: child.value.slice(textStart, match.index),
+            });
+          }
+
+          // Add a line, and the eol.
+          lineNumber += 1;
+          replacement.push(
+            createLine(
+              line,
+              showLineNumbers ? lineNumber : undefined,
+              clsx([
+                "code-line",
+                showLineNumbers && "numbered-code-line",
+                linesToBeHighlighted.includes(lineNumber) && "highlighted-code-line",
+              ]),
+            ),
+            {
+              type: "text",
+              value: match[0],
+            },
+          );
+
+          start = index + 1;
+          textStart = match.index + match[0].length;
+          match = RE.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,
+          showLineNumbers ? lineNumber : undefined,
+          clsx([
+            "code-line",
+            showLineNumbers && "numbered-code-line",
+            linesToBeHighlighted.includes(lineNumber) && "highlighted-code-line",
+          ]),
+        ),
+      );
+    }
+
+    /* v8 ignore end */
+
+    // Replace children with new array.
+    tree.children = replacement;
+  }
+
+  /**
+   * Transform.
+   *
+   * @param {Root} tree
+   *   Tree.
+   * @returns {undefined}
+   *   Nothing.
+   */
+  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;
+
+      let meta = (code.data as CodeData)?.meta?.toLowerCase().trim();
+
+      // 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 className = code.properties.className.find(testingFunction);
+
+        if (className) {
+          const language = className.slice(9).toLowerCase();
+
+          if (language.startsWith("{") || language.startsWith("showlinenumbers")) {
+            meta = meta ? language + meta : language;
+
+            const index = code.properties.className.findIndex(testingFunction);
+
+            if (index > -1) {
+              code.properties.className[index] = "language-unknown";
+            }
+          }
+        }
+      }
+
+      if (!meta) return;
+
+      const showLineNumbers = settings.showLineNumbers || meta.includes("showlinenumbers");
+
+      // find number range string within curly braces and parse it
+      const RE = /{(?<lines>[\d\s,-]+)}/g;
+      const strLineNumbers = RE.exec(meta)?.groups?.lines?.replace(/\s/g, "");
+      const linesToBeHighlighted = strLineNumbers ? rangeParser(strLineNumbers) : [];
+
+      if (!showLineNumbers && linesToBeHighlighted.length === 0) return;
+
+      // add wrapper for each line mutating the code element
+      starryNightGutter(code, showLineNumbers, linesToBeHighlighted);
+    });
+  };
+};
+
+export default plugin;