Skip to content

[docs-infra] Extend Syntax Highlighting#4658

Merged
dav-is merged 6 commits intomui:masterfrom
dav-is:docs-infra/extend-syntax-highlighting
Apr 23, 2026
Merged

[docs-infra] Extend Syntax Highlighting#4658
dav-is merged 6 commits intomui:masterfrom
dav-is:docs-infra/extend-syntax-highlighting

Conversation

@dav-is
Copy link
Copy Markdown
Member

@dav-is dav-is commented Apr 21, 2026 •
edited
Loading

Note

Upstream PR: mui/mui-public#1307 (released in v0.9)

Adds additional classes to target when highlighting code snippets.

Preview Deploy

Before:

Screenshot From 2026-04-21 19-22-45

After:

Screenshot From 2026-04-21 19-22-26

@dav-is dav-is added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). labels Apr 21, 2026
@dav-is dav-is mentioned this pull request Apr 21, 2026
Merged
@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 21, 2026 •
edited
Loading

commit: 336e354

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 21, 2026

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 8ca71c7
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69e807f01b98df00083b4a95
😎 Deploy Preview https://deploy-preview-4658--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@code-infra-dashboard
Copy link
Copy Markdown

code-infra-dashboard Bot commented Apr 21, 2026 •
edited
Loading

Bundle size

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

Details of bundle changes

Performance

Total duration: 1,487.46 ms 🔺+130.23 ms(+9.6%) | Renders: 53 (+0) | Paint: 2,287.76 ms 🔺+185.68 ms(+8.8%)

Test Duration Renders
Tabs mount (200 instances) 279.65 ms 🔺+39.34 ms(+16.4%) 4 (+0)
Menu mount (300 instances) 168.15 ms 🔺+26.18 ms(+18.4%) 2 (+0)
Slider mount (300 instances) 162.23 ms 🔺+18.23 ms(+12.7%) 3 (+0)
Tooltip mount (300 contained roots) 85.35 ms 🔺+14.51 ms(+20.5%) 2 (+0)
Scroll Area mount (300 instances) 108.42 ms 🔺+11.53 ms(+11.9%) 3 (+0)

...and 7 more. View full report

Details of benchmark changes

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

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 21, 2026 •
edited
Loading

✅ Deploy Preview for base-ui ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 336e354
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/69ea60f8071f240008b6332b
😎 Deploy Preview https://deploy-preview-4658--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

dav-is
dav-is commented Apr 22, 2026
View reviewed changes
Comment thread docs/src/css/syntax.css
Comment on lines -257 to -259
/* Target CSS property names in CSS code blocks
Property names are .pl-c1 elements that are followed by a text node containing ':'
This distinguishes them from function names like 'var' which are followed by '(' */
Copy link
Copy Markdown
Member Author

@dav-is dav-is Apr 22, 2026

Choose a reason for hiding this comment

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

This is now handled by:

--color-docs-infra-syntax-css-property: var(--color-foreground);

@dav-is dav-is marked this pull request as ready for review April 22, 2026 22:08
@dav-is dav-is requested a review from aarongarciah April 22, 2026 22:08
aarongarciah
aarongarciah approved these changes Apr 23, 2026
View reviewed changes
Copy link
Copy Markdown
Member

@aarongarciah aarongarciah left a comment

Choose a reason for hiding this comment

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

Very nice

Comment thread docs/src/css/syntax.css
--color-docs-infra-syntax-this: var(--color-red);
--color-docs-infra-syntax-builtin-type: var(--color-blue);
--color-docs-infra-syntax-jsx: var(--color-blue);
--color-docs-infra-syntax-html-tag: var(--color-green);
Copy link
Copy Markdown
Member

@aarongarciah aarongarciah Apr 23, 2026

Choose a reason for hiding this comment

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

Where is this one used? I expected to see it in use here:

Image

Copy link
Copy Markdown
Member Author

@dav-is dav-is Apr 23, 2026

Choose a reason for hiding this comment

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

It is in use as .di-ht:

image

Comment thread docs/src/css/syntax.css
Comment on lines +46 to +48
--color-docs-infra-syntax-attr-key: var(--color-violet);
--color-docs-infra-syntax-attr-value: var(--color-navy);
--color-docs-infra-syntax-attr-equals: var(--color-red);
Copy link
Copy Markdown
Member

@aarongarciah aarongarciah Apr 23, 2026

Choose a reason for hiding this comment

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

Where are these ones used?

Copy link
Copy Markdown
Member Author

@dav-is dav-is Apr 23, 2026

Choose a reason for hiding this comment

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

With <Combobox.Positioner align="start" sideOffset={4}>

align and sideOffset are --color-docs-infra-syntax-attr-key
The = are --color-docs-infra-syntax-attr-equals
And "start" is --color-docs-infra-syntax-attr-value (it only applies to literal string values)

&lt;<span class="pl-c1 di-jsx">Combobox.Positioner</span> <span class="pl-e di-ak">align</span><span class="pl-k di-ae">=</span><span class="pl-s di-av"><span class="pl-pds">"</span>start<span class="pl-pds">"</span></span> <span class="pl-e di-ak">sideOffset</span><span class="pl-k di-ae">=</span><span class="pl-pse">{</span><span class="pl-c1 di-num">4</span><span class="pl-pse">}</span>&gt;

I just set them to the same color they were already being displayed as, but feel free to customize them.

@dav-is dav-is merged commit 8089eec into mui:master Apr 23, 2026
24 checks passed
@dav-is dav-is deleted the docs-infra/extend-syntax-highlighting branch April 23, 2026 18:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aarongarciah aarongarciah aarongarciah approved these changes

@atomiks atomiks Awaiting requested review from atomiks atomiks is a code owner

@colmtuite colmtuite Awaiting requested review from colmtuite colmtuite is a code owner

@michaldudak michaldudak Awaiting requested review from michaldudak michaldudak is a code owner

@flaviendelangle flaviendelangle Awaiting requested review from flaviendelangle flaviendelangle is a code owner

Assignees

No one assigned

Labels

scope: docs-infra Involves the docs-infra product (https://www.notion.so/mui-org/b9f676062eb94747b6768209f7751305). type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@dav-is @aarongarciah