Skip to content

fix(remark): preserve code display names through raw HTML#879

Open
lizuju wants to merge 1 commit into
nodejs:mainfrom
lizuju:fix/learn-code-display-names-732
Open

fix(remark): preserve code display names through raw HTML#879
lizuju wants to merge 1 commit into
nodejs:mainfrom
lizuju:fix/learn-code-display-names-732

Conversation

@lizuju

@lizuju lizuju commented Jul 3, 2026

Copy link
Copy Markdown

Summary

  • preserve fenced code metadata across rehypeRaw in the getRemarkRecma pipeline
  • restore that metadata before Shiki groups adjacent code blocks, so displayName reaches CodeTabs
  • add regression coverage for adjacent code blocks while raw HTML parsing is enabled

Fixes #732

Verification

  • node --test --experimental-test-module-mocks src/utils/__tests__/remark.test.mjs
  • npm test
  • npm run lint (passes; existing warnings remain in src/generators/web/ui/hooks/useOrama.mjs)
  • npm run format:check
  • git diff --check
  • Generated the real learn page from nodejs/learn/pages/test-runner/collecting-code-coverage.md with node bin/cli.mjs generate -t web ...; the generated collecting-code-coverage.html now renders the first tabs as main.js and main.test.js, and the bundle contains displayNames: "main.js|main.test.js".

@lizuju lizuju requested a review from a team as a code owner July 3, 2026 10:27
@vercel

vercel Bot commented Jul 3, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
api-docs-tooling Ready Ready Preview Jul 3, 2026 10:28am

Request Review

@cursor

cursor Bot commented Jul 3, 2026

Copy link
Copy Markdown

PR Summary

Low Risk
Localized markdown pipeline change with a focused regression test; no auth, data, or API surface impact.

Overview
Fixes code tab labels (e.g. main.js / main.test.js) being lost on pages that mix raw HTML with adjacent fenced blocks in the getRemarkRecma pipeline.

rehypeRaw was reparsing the tree and dropping fenced-code data.meta, so Shiki could not pass displayName into CodeTabs. The change adds preserveCodeMeta / restoreCodeMeta plugins that stash meta on element properties before raw HTML parsing and put it back on node.data before the Shiki step.

A regression test runs the full processor with a raw <div> plus two displayName-annotated fences and asserts the emitted CodeTabs attributes include the expected displayNames string.

Reviewed by Cursor Bugbot for commit 0b56135. Bugbot is set up for automated code reviews on this repo. Configure here.

Comment on lines +9 to +34
const visit = node => {
if (!node || typeof node !== 'object') {
return;
}

if (node.type === 'JSXOpeningElement' && node.name?.name === 'CodeTabs') {
attributes.push(
Object.fromEntries(
node.attributes.map(attribute => [
attribute.name.name,
attribute.value?.value,
])
)
);
}

Object.values(node).forEach(value => {
if (Array.isArray(value)) {
value.forEach(visit);
} else {
visit(value);
}
});
};

visit(tree);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you use unist-util-visit?

Comment on lines +43 to +54
processor.parse(`
<div class="note">raw html</div>

\`\`\`cjs displayName="main.js"
console.log(1);
\`\`\`

\`\`\`cjs displayName="main.test.js"
console.log(2);
\`\`\`
`)
);

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dedent, please

@avivkeller

Copy link
Copy Markdown
Member

Bump @lizuju

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

File Name Support for Learn Guides

2 participants