Skip to content

fix(rehype-shiki): sequential codeboxes are merged together #7805

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

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

fix(rehype-shiki): sequential codeboxes are merged together #7805

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6624ef4
fix(rehype-shiki): sequential codeboxes are merged together
AugustinMauroy Jun 1, 2025
9516d70
fix: typo
AugustinMauroy Jun 1, 2025
bc69c5b
WIP
AugustinMauroy Jun 1, 2025
7e06603
Update packages/rehype-shiki/src/plugin.mjs
AugustinMauroy Jun 28, 2025
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
2 changes: 1 addition & 1 deletion packages/rehype-shiki/src/__tests__/highlighter.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ mock.module('shiki/themes/nord.mjs', {
defaultExport: { name: 'nord', colors: { 'editor.background': '#2e3440' } },
});

describe('createHighlighter', async () => {
describe('createHighlighter', { concurrency: true }, async () => {
const { createHighlighter } = await import('../highlighter.mjs');

describe('getLanguageDisplayName', () => {
Expand Down
350 changes: 338 additions & 12 deletions packages/rehype-shiki/src/__tests__/plugin.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,21 @@ mock.module('unist-util-visit', {
namedExports: { visit: mockVisit, SKIP: Symbol() },
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
namedExports: { visit: mockVisit, SKIP: Symbol() },
namedExports: { visit: mockVisit },

If you aren't relying on SKIP anymore, no need to mock it

});

describe('rehypeShikiji', async () => {
describe('rehypeShikiji', { concurrency: true }, async () => {
const { default: rehypeShikiji } = await import('../plugin.mjs');
const mockTree = { type: 'root', children: [] };

it('calls visit twice', () => {
it('calls visit once', () => {
mockVisit.mock.resetCalls();

rehypeShikiji()(mockTree);
assert.strictEqual(mockVisit.mock.calls.length, 2);

assert.strictEqual(mockVisit.mock.calls.length, 1);
});

it('creates CodeTabs for multiple code blocks', () => {
const parent = {
it('does not create CodeTabs for non-CJS/ESM code blocks', () => {
const treeToTransform = {
type: 'root',
children: [
{
tagName: 'pre',
Expand All @@ -55,13 +58,336 @@ describe('rehypeShikiji', async () => {
],
};

mockVisit.mock.mockImplementation((tree, selector, visitor) => {
if (selector === 'element') {
visitor(parent.children[0], 0, parent);
}
});
rehypeShikiji()(treeToTransform);

rehypeShikiji()(mockTree);
assert.ok(parent.children.some(child => child.tagName === 'CodeTabs'));
assert.strictEqual(
treeToTransform.children.length,
2,
'Should not group non-CJS/ESM blocks'
);
assert.ok(
treeToTransform.children.every(child => child.tagName === 'pre'),
'All children should remain pre elements'
);
// Ensure no CodeTabs were created
assert.ok(
!treeToTransform.children.some(child => child.tagName === 'CodeTabs'),
'CodeTabs should not be created for JS/TS'
);
});

it('If there are a sequence of codeblock of CJS/ESM, it should create pairs of CodeTabs', () => {
const parent = {
type: 'root',
children: [
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="CJS"' },
properties: { className: ['language-cjs'] },
},
],
},
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="ESM"' },
properties: { className: ['language-esm'] },
},
],
},
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="CJS"' },
properties: { className: ['language-cjs'] },
},
],
},
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="ESM"' },
properties: { className: ['language-esm'] },
},
],
},
],
};

rehypeShikiji()(parent);

assert.strictEqual(
parent.children.length,
2,
'Should create two CodeTabs groups'
);

// Check first CodeTabs group
const firstGroup = parent.children[0];
assert.strictEqual(
firstGroup.tagName,
'CodeTabs',
'Group 1 should be CodeTabs'
);
assert.strictEqual(
firstGroup.properties.languages,
'cjs|esm',
'Group 1 languages should be cjs|esm'
);
assert.strictEqual(
firstGroup.properties.displayNames,
'CJS|ESM',
'Group 1 displayNames should be CJS|ESM'
);
assert.ok(
Array.isArray(firstGroup.children) && firstGroup.children.length === 2,
'Group 1 should contain 2 code blocks'
);
assert.strictEqual(
firstGroup.children[0].children[0].properties.className[0],
'language-cjs',
'Group 1, Block 1 should be CJS'
);
assert.strictEqual(
firstGroup.children[1].children[0].properties.className[0],
'language-esm',
'Group 1, Block 2 should be ESM'
);
Copy link
Member

Choose a reason for hiding this comment

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

Can we use deepStrictEqual or partialDeepStrictEqual instead of comparing each with it's own assert?


// Check second CodeTabs group
const secondGroup = parent.children[1];
assert.strictEqual(
secondGroup.tagName,
'CodeTabs',
'Group 2 should be CodeTabs'
);
assert.strictEqual(
secondGroup.properties.languages,
'cjs|esm',
'Group 2 languages should be cjs|esm'
);
assert.strictEqual(
secondGroup.properties.displayNames,
'CJS|ESM',
'Group 2 displayNames should be CJS|ESM'
);
assert.ok(
Array.isArray(secondGroup.children) && secondGroup.children.length === 2,
'Group 2 should contain 2 code blocks'
);
assert.strictEqual(
secondGroup.children[0].children[0].properties.className[0],
'language-cjs',
'Group 2, Block 1 should be CJS'
);
assert.strictEqual(
secondGroup.children[1].children[0].properties.className[0],
'language-esm',
'Group 2, Block 2 should be ESM'
);
});

it("if it isn't a sequence of cjs/esm codeblock, it should not pair them", () => {
const parent = {
type: 'root',
children: [
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="CJS"' },
properties: { className: ['language-cjs'] },
},
],
},
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="ESM"' },
properties: { className: ['language-esm'] },
},
],
},
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="TS"' },
properties: { className: ['language-ts'] },
},
],
},
],
};

rehypeShikiji()(parent);

assert.strictEqual(
parent.children.length,
3,
'Should not create CodeTabs groups'
);

// Check first code block
const firstBlock = parent.children[0];
assert.strictEqual(
firstBlock.tagName,
'pre',
'First block should be a pre'
);
assert.strictEqual(
firstBlock.children[0].tagName,
'code',
'First block should contain a code element'
);
assert.strictEqual(
firstBlock.children[0].properties.className[0],
'language-cjs',
'First block should be CJS'
);

// Check second code block
const secondBlock = parent.children[1];
assert.strictEqual(
secondBlock.tagName,
'pre',
'Second block should be a pre'
);
assert.strictEqual(
secondBlock.children[0].tagName,
'code',
'Second block should contain a code element'
);
assert.strictEqual(
secondBlock.children[0].properties.className[0],
'language-esm',
'Second block should be ESM'
);

// Check third code block
const thirdBlock = parent.children[2];
assert.strictEqual(
thirdBlock.tagName,
'pre',
'Third block should be a pre'
);
assert.strictEqual(
thirdBlock.children[0].tagName,
'code',
'Third block should contain a code element'
);
assert.strictEqual(
thirdBlock.children[0].properties.className[0],
'language-ts',
'Third block should be TS'
);

const parentBis = {
type: 'root',
children: [
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="package.json"' },
properties: { className: ['language-json'] },
},
],
},
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="workflow"' },
properties: { className: ['language-yaml'] },
},
],
},
{
tagName: 'pre',
children: [
{
tagName: 'code',
data: { meta: 'displayName="mod.ts"' },
properties: { className: ['language-ts'] },
},
],
},
],
};

rehypeShikiji()(parentBis);

assert.strictEqual(
parentBis.children.length,
3,
'Should not create CodeTabs groups for different languages'
);
// Check first code block
const firstBlockBis = parentBis.children[0];
assert.strictEqual(
firstBlockBis.tagName,
'pre',
'First block should be a pre'
);
assert.strictEqual(
firstBlockBis.children[0].tagName,
'code',
'First block should contain a code element'
);
assert.strictEqual(
firstBlockBis.children[0].properties.className[0],
'language-json',
'First block should be JSON'
);
// Check second code block
const secondBlockBis = parentBis.children[1];
assert.strictEqual(
secondBlockBis.tagName,
'pre',
'Second block should be a pre'
);
assert.strictEqual(
secondBlockBis.children[0].tagName,
'code',
'Second block should contain a code element'
);
assert.strictEqual(
secondBlockBis.children[0].properties.className[0],
'language-yaml',
'Second block should be YAML'
);
// Check third code block
const thirdBlockBis = parentBis.children[2];
assert.strictEqual(
thirdBlockBis.tagName,
'pre',
'Third block should be a pre'
);
assert.strictEqual(
thirdBlockBis.children[0].tagName,
'code',
'Third block should contain a code element'
);
assert.strictEqual(
thirdBlockBis.children[0].properties.className[0],
'language-ts',
'Third block should be TS'
);
});
});
Loading
Loading