I assume you use rehype-highlight for code highlighting. Our module, example.js, looks as follows:

`javascript
import { read } from "to-vfile";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeRaw from "rehype-raw";
import rehypeHighlight from "rehype-highlight";
import rehypeHighlightLines from "rehype-highlight-code-lines";
import rehypeStringify from "rehype-stringify";

main();

async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkRehype, { allowDangerousHtml: true })
.use(rehypeRaw)
.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 span, which has appropriate class names (code-line, numbered-code-line, highlighted-code-line) and line numbering attribute data-line-number.

`html


  
    
      let a1;
    
          class="code-line numbered-code-line highlighted-code-line" data-line-number="2">
      let a2;
    
    
      let a3;
    
  

`typescript
type HighlightLinesOptions = {
showLineNumbers?: boolean; // default is "false"
keepOuterBlankLine?: boolean; // default is "false"
};

use(rehypeHighlightLines, HighlightLinesOptions);
`

#### showLineNumbers

It is a boolean option which is for all code to be numbered.

By default, it is false.

`javascript
use(rehypeHighlightLines, {
showLineNumbers: true,
});
`

Now, all code blocks will become numbered.

If you want to exclude a specific code block not to be numbered, use noLineNumbers.

\\\[language] noLineNumbers {2}

\\\[language] noLineNumbers

\\\noLineNumbers

If you want to exclude a specific code block not to be numbered in HTML fragment (in

) use no-line-numbers class. In that case, the directive could be with dash, or without, or camel cased.
Sometimes you may want to start the line numbering from a specific number. In that cases, use showLineNumbers=[number] in code blocks. For example, below, the code block's line numbering will start from number 8. 
\\\[language] {2} showLineNumbers=8
\\\[language] showLineNumbers=8
\\\showLineNumbers=8
If you want to start the line numbering from a specific number in HTML fragment (in 
) use data-start-numbering attribute.
#### keepOuterBlankLine
It is a boolean option which is for all code blocks have an empty line container in the beginning and at the end. I added this option in case you want to have an empty code line on the edges for whatever reason.
By default, it is false.
`javascript
use(rehypeHighlightLines, {
  keepOuterBlankLine: true,
});
`
Now, all code blocks will have one empty code line on each edge.
If you want a specific code block has empty code line on the edges, use keepOuterBlankLine.
\\\[language] keepOuterBlankLine
\\\keepOuterBlankLine
In HTML fragment use keep-outer-blank-line class. In that case, the directive could be with dash, or without, or camel cased.
$3
`typescript
// line numbering will occur as per directive "showLineNumber" and code-line containers will be  inline element
use(rehypeHighlightLines);
// all code blocks will be numbered by default and code-line containers will be  inline element
use(rehypeHighlightLines, {
  showLineNumbers: true,
});
`
An example screen snapshot from a working app:
!markdown code block input
!markdown code block result
Here you can find some demo applications below which the rehype-highlight and rehype-highlight-code-lines are used together:
+ demo blog application using next-mdx-remote-client within Next.js app router
+ demo blog application using next-mdx-remote-client within Next.js pages router
Styling
The following styles can be added for line highlighting and line numbering to work correctly:
Choose the colors as you wish!
`css
.parent-container-of-pre {
  display: grid; / in order { overflow-x: auto; } works in child 
 /
}
pre,
pre code {
  background-color: var(--color-code-background);
  direction: ltr;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  line-height: 1.2;
  tab-size: 2;
  hyphens: none;
}
pre {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-text-weak);
  border-radius: 5px;
  overflow-x: auto;
}
pre > code {
  float: left;
  min-width: 100%;
}
.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 /
  display: inline-block;
}
.code-line.inserted {
  background-color: var(--color-inserted-line); / inserted code-line (+) /
}
.code-line.deleted {
  background-color: var(--color-deleted-line); / deleted code-line (-) /
}
.highlighted-code-line {
  background-color: var(--color-highlighted-line);
  border-left: 4px solid var(--color-highlighted-line-indicator);
}
.numbered-code-line::before {
  content: attr(data-line-number);
  margin-left: -8px;
  margin-right: 16px;
  width: 1rem;
  color: var(--color-text-weak);
  text-align: right;
  display: inline-block;
}
`
Syntax tree
This plugin modifies the hast (HTML abstract syntax tree).
Types
This package is fully typed with [TypeScript][url-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.
$3
- remark-flexible-code-titles
  – Remark plugin to add titles or/and containers for the code blocks with customizable properties
- remark-flexible-containers
  – Remark plugin to add custom containers with customizable properties in markdown
- remark-ins
  – Remark plugin to add ins element in markdown
- remark-flexible-paragraphs
  – Remark plugin to add custom paragraphs with customizable properties in markdown
- remark-flexible-markers
  – Remark plugin to add custom mark element with customizable properties in markdown
- remark-flexible-toc
  – Remark plugin to expose the table of contents via vfile.data or via an option reference
- remark-mdx-remove-esm
  – Remark plugin to remove import and/or export statements (mdxjsEsm)
$3
- rehype-pre-language
  – Rehype plugin to add language information as a property to pre element
- rehype-highlight-code-lines
  – Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines
- rehype-code-meta
  – Rehype plugin to copy code.data.meta to code.properties.metastring
- rehype-image-toolkit
  – Rehype plugin to enhance Markdown image syntax ![]() and Markdown/MDX media elements (, 
 with optional captions, unwrapping images/videos/audio from paragraph, parsing directives in title for styling and adding attributes, and dynamically converting images into