rehype-highlight-code-lines 1.0.4 → 1.0.7

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

@@ -1,13 +1,22 @@
 import type { Plugin } from "unified";
 import type { Root } from "hast";
+declare module "hast" {
+    interface Data {
+        meta?: string | undefined;
+    }
+}
 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>;