Skip to content

Update the example for line numbering and highlighting in the readme #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Feb 21, 2025
Merged

Update the example for line numbering and highlighting in the readme #36

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 9 additions & 6 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -362,10 +362,16 @@ console.log(String(file))
You can add support for line numbers and line highlighting with a separate
plugin, [`rehype-highlight-code-lines`][rehype-highlight-code-lines].

`rehype-highlight-code-lines` runs on `<code>` elements with directives
like `showLineNumbers` and range number in curly braces like `{2-4, 8}`.
That directives can be passed as a word in markdown
(` ```ts showLineNumbers {2-4,8} `) or as a class and attribute in HTML
(`<code class="language-ts show-line-numbers" data-highlight-lines="2-4,8">`).

For example, with `example.html`:

```html
<pre><code class="language-js">console.log("Hi!")</code></pre>
<pre><code class="language-js show-line-numbers">console.log("Hi!")</code></pre>
```

…and `example.js`:
Expand All @@ -379,10 +385,7 @@ import {read} from 'to-vfile'
const file = await rehype()
.data('settings', {fragment: true})
.use(rehypeHighlight)
.use(rehypeHighlightCodeLines, {
showLineNumbers: true,
lineContainerTagName: 'div'
})
.use(rehypeHighlightCodeLines)
.process(await read('example.html'))

console.log(String(file))
Expand All @@ -391,7 +394,7 @@ console.log(String(file))
…then running that yields:

```html
<pre><code class="hljs language-js"><div class="code-line numbered-code-line" data-line-number="1"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"Hi!"</span>)</div></code></pre>
<pre><code class="hljs language-js"><span class="code-line numbered-code-line" data-line-number="1"><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"Hi!"</span>)</span></code></pre>
```

## Types
Expand Down