Skip to content

[docs-infra] Fix nested code emphasis#1348

Open
dav-is wants to merge 7 commits intomasterfrom
docs-infra/fix-code-emphasis-nested
Open

[docs-infra] Fix nested code emphasis#1348
dav-is wants to merge 7 commits intomasterfrom
docs-infra/fix-code-emphasis-nested

Conversation

@dav-is
Copy link
Copy Markdown
Member

@dav-is dav-is commented Apr 25, 2026

Enhance the handling of nested code emphasis to ensure proper visual representation and merging of highlighted lines. Adjustments include modifications to CSS for better background merging and updates to the logic for detecting nesting in highlight ranges.

Preview Deployment
Downstream PR

Before

image

After

Screenshot From 2026-04-25 18-33-03

Co-authored-by: Copilot <copilot@github.com>
@dav-is dav-is added type: bug It doesn't behave as expected. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). labels Apr 25, 2026
@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented Apr 25, 2026

Bundle size

Bundle Parsed size Gzip size
@base-ui/react 0B(0.00%) 0B(0.00%)
@mui/x-charts-pro 0B(0.00%) 0B(0.00%)

Details of bundle changes

Performance

Total duration: 16.58 ms +0.36 ms(+2.2%) | Renders: 4 (+0) | Paint: 72.72 ms +2.80 ms(+4.0%)

Test Duration Renders
HeavyList mount 10.30 ms 🔺+0.20 ms(+2.0%) 1 (+0)
DataGrid mount with paint timing 2.08 ms 🔺+0.15 ms(+7.8%) 1 (+0)
Counter click 4.20 ms 🔺+0.01 ms(+0.3%) 2 (+0)

Details of benchmark changes

Deploy preview


Check out the code infra dashboard for more information about this PR.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR improves nested code-emphasis rendering in docs-infra by (1) correctly detecting highlight nesting for cases involving @highlight-text and single-line @highlight, and (2) adjusting demo/docs CSS so adjacent regular/strong highlights visually merge cleanly.

Changes:

  • Update nested-highlight detection to rely on containingRangeDepth (instead of existing.lineHighlight) and treat single-line @highlight as depth-1.
  • Treat multiline ranges that collapse to a single content line as data-hl-position="single" so they render as standalone highlights.
  • Add CSS rules (and stacking context) to visually merge regular highlight backgrounds with adjacent strong-highlight blocks.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/docs-infra/src/pipeline/enhanceCodeEmphasis/enhanceCodeEmphasis.ts Fixes nesting/position logic for mixed @highlight, @highlight-start/end, and @highlight-text cases.
packages/docs-infra/src/pipeline/enhanceCodeEmphasis/enhanceCodeEmphasis.test.ts Adds regressions covering nested highlight + @highlight-text interactions and single-line-in-multiline nesting.
docs/app/docs-infra/pipeline/enhance-code-emphasis/page.mdx Updates documented CSS to merge backgrounds between adjacent regular and strong highlight lines.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/IndentContent.module.css Applies the same visual merging/stacking rules to the indent demo.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CollapsibleDemoContent.module.css Applies the same visual merging/stacking rules to the collapsible demo variant.
docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CollapsibleContent.module.css Applies the same visual merging/stacking rules to the collapsible content demo.
docs/app/docs-infra/components/code-highlighter/demos/DemoContent.module.css Applies the same visual merging/stacking rules to code-highlighter demo styling.
docs/app/docs-infra/components/code-highlighter/demos/CodeContent.module.css Applies the same visual merging/stacking rules to code-highlighter demo styling.

@dav-is dav-is marked this pull request as ready for review April 25, 2026 23:48
dav-is and others added 3 commits April 25, 2026 20:42
Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
@dav-is dav-is requested a review from Janpot April 27, 2026 16:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). type: bug It doesn't behave as expected.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants