Highlighting multiple codes in the same pre is broken

[talatkuyuk]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Affected package

rehype-highlight

Steps to reproduce

rehype-highlight highlights the pre content instead of code content.

Actually, <pre> tag defines preformatted text and preserves both spaces and line breaks.

A <pre> element can hold text, anchor tag, or contain multiple <code> elements. It is valid HTML usage.

It is not suitable or is a violation to have additional elements in pre other than code; but, rehype-highligt should actually preserve the xml structure of pre element and not interfere with other elements' contents inside pre other than code, and focus code element content for code highlighting. For some reason pre element may have additional elements like copy content button or footer etc, or may have more than one code element.

See the rehype-highlight behaviour:

import { rehype } from "rehype";
import rehypeHighlight from "rehype-highlight";

const html = `<pre><button>click</button><code class="language-javascript">const a = 1;</code><span>footer</span></pre>`;

// without highlighting
const file = await rehype()
  .data("settings", { fragment: true })
  .process(html);

console.log(String(file)); 

// result: for reference without highlighting
// "<pre><button>click</button><code class="language-javascript">const a = 1;</code><span>footer</span></pre>"

// with highlighting
const file = await rehype()
  .data("settings", { fragment: true })
  .use(rehypeHighlight)
  .process(html);

console.log(String(file)); 

// result: pay attention to texts "click" and "footer"
// "<pre><button>click</button><code class="hljs language-javascript">clickconst a = <span class="hljs-number">1</span>;footer</code><span>footer</span></pre>"

const html_with_two_codes = "<pre><code class="language-javascript">const a = 1;</code><code class="language-phyton">printf("x")</code></pre>";

// with highlighting
const file = await rehype()
  .data("settings", { fragment: true })
  .use(rehypeHighlight)
  .process(html_with_two_codes);

console.log(String(file)); 

// result: strange because the first code content includes the second one's content after highligting.
// "<pre><code class="hljs language-javascript"><span class="hljs-keyword">const</span> a = <span class="hljs-number">1</span>;<span class="hljs-title function_">printf</span>(<span class="hljs-string">"x"</span>)</code><code class="hljs language-phyton">printf("x")</code></pre>"

I realized this situation while testing rehype-highlight-code-lines as a result of having undesired additional line containers which contains undesired content/spaces.

Actual behavior

rehype-highlight highlights the pre content instead of code content.

Expected behavior

rehype-highlight focuses and highlights the code content instead of pre content.

Runtime

node@20

Package manager

npm@11

Operating system

macos@latest

Build and bundle tools

No response

[wooorm]

rehype-highlight highlights the pre content instead of code content.

Does it? The code seems to check node.tagName === 'code'? And work on node?

---

Aside: Looks like you might want a “copy” button?
Would that word “copy” be “preformatted” as well?
Why not wrap the pre and code in another container, and add buttons to that?
On the MDX website, for example, I wrap certain things in a code frame, and add copy buttons: https://github.com/mdx-js/mdx/blob/b9ec24467b718a5e698984a235654a9f311161af/website/mdx-loader.js#L379.

[wooorm]

Bug seems to be toText(parent) instead of toText(node), as introduced here: 734349c; wild, been there for years

[talatkuyuk]

I would say this, exactly. 👍 toText(parent) ---> toText(node)

try {
  result = lang
    ? lowlight.highlight(lang, toText(parent), {prefix})
    : lowlight.highlightAuto(toText(parent), {prefix, subset})
} catch (error) {
  // ...
}

Aside: Looks like you might want a “copy” button?

Nope. This is not about that. The issue effects rehpe-highlight-code-lines.

[wooorm]

My guess is that, because toText didn’t support a whitespace: 'pre' option years ago, I assumed parent would be fine

[wooorm]

Released in 7.0.2! Thank you :)

[talatkuyuk]

You are so speedy, thank you too :)