Skip to content

[docs-infra] Extend Syntax Highlighting #4658

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

Merged
dav-is merged 6 commits into from
Apr 23, 2026
+49 −68
Merged

[docs-infra] Extend Syntax Highlighting #4658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8ca71c7
Extend Syntax Highlighting
dav-is Apr 21, 2026
1cda64e
Fix data-inline selector
dav-is Apr 21, 2026
4508757
bump to released
dav-is Apr 22, 2026
824aee0
bump docs-infra
dav-is Apr 22, 2026
4bb879c
Merge branch 'master' into docs-infra/extend-syntax-highlighting
dav-is Apr 22, 2026
336e354
Merge branch 'master' into docs-infra/extend-syntax-highlighting
dav-is Apr 23, 2026
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 docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@base-ui/utils": "workspace:*",
"@mdx-js/loader": "^3.1.1",
"@mdx-js/react": "^3.1.1",
"@mui/internal-docs-infra": "0.8.1-canary.0",
"@mui/internal-docs-infra": "0.9.1-canary.0",
"@next/mdx": "^16.1.6",
"@react-spring/web": "^10.0.3",
"@stefanprobst/rehype-extract-toc": "^3.0.0",
Expand Down
105 changes: 43 additions & 62 deletions docs/src/css/syntax.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,20 @@
--color-prettylights-syntax-meta-diff-range: var(--color-violet);

/* Docs-infra extensions for concepts not in prettylights */
--color-docs-infra-syntax-number: var(--color-blue);
--color-docs-infra-syntax-boolean: var(--color-blue);
--color-docs-infra-syntax-nullish: var(--color-gray-500);
--color-docs-infra-syntax-other: var(--color-foreground);
--color-docs-infra-syntax-bracket-tag: var(--color-gray);
--color-docs-infra-syntax-bracket-curly: var(--color-gray);
--color-docs-infra-syntax-bracket-round: var(--color-gray);
--color-docs-infra-syntax-bracket-square: var(--color-gray);
--color-docs-infra-syntax-bracket-angle: var(--color-gray);
--color-docs-infra-syntax-bracket-quote: var(--color-gray);
--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);
Comment on lines +46 to +48
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.

--color-docs-infra-syntax-data-attr: var(--color-blue);
--color-docs-infra-syntax-css-property: var(--color-foreground);
--color-docs-infra-syntax-css-value: var(--color-blue);
--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

--color-docs-infra-syntax-jsx-tag: var(--color-blue);
}
}

Expand Down Expand Up @@ -174,95 +180,70 @@

/* Docs-infra extensions (.di-* classes) */

/* Nullish values (null, undefined) */
.di-n {
color: var(--color-docs-infra-syntax-nullish);
.di-num {
color: var(--color-docs-infra-syntax-number);
}

/* Default text color */
.di-d {
color: var(--color-foreground);
}

/* Parameter highlighting */
.di-p {
color: var(--color-prettylights-syntax-storage-modifier-import);
.di-bool {
color: var(--color-docs-infra-syntax-boolean);
}

/* Misc/other markup styling */
.di-o {
color: var(--color-docs-infra-syntax-other);
/* Nullish values (null, undefined) */
.di-n {
color: var(--color-docs-infra-syntax-nullish);
}

/* Bracket types */
.di-bt {
color: var(--color-docs-infra-syntax-bracket-tag);
.di-ak {
color: var(--color-docs-infra-syntax-attr-key);
}

.di-bc {
color: var(--color-docs-infra-syntax-bracket-curly);
.di-av {
color: var(--color-docs-infra-syntax-attr-value);
}

.di-br {
color: var(--color-docs-infra-syntax-bracket-round);
.di-ae {
color: var(--color-docs-infra-syntax-attr-equals);
}

.di-bs {
color: var(--color-docs-infra-syntax-bracket-square);
.di-da {
color: var(--color-docs-infra-syntax-data-attr);
}

.di-ba {
color: var(--color-docs-infra-syntax-bracket-angle);
.di-cp {
color: var(--color-docs-infra-syntax-css-property);
}

.di-bq {
color: var(--color-docs-infra-syntax-bracket-quote);
.di-cv {
color: var(--color-docs-infra-syntax-css-value);
}

/* Diff additions */
.di-ins {
color: var(--color-prettylights-syntax-markup-inserted-text);
background-color: var(--color-prettylights-syntax-markup-inserted-bg);
.di-this {
color: var(--color-docs-infra-syntax-this);
}

/* Diff deletions */
.di-del {
color: var(--color-prettylights-syntax-markup-deleted-text);
background-color: var(--color-prettylights-syntax-markup-deleted-bg);
.di-bt {
color: var(--color-docs-infra-syntax-builtin-type);
}

/* Diff changes */
.di-chg {
color: var(--color-prettylights-syntax-markup-changed-text);
background-color: var(--color-prettylights-syntax-markup-changed-bg);
.di-jsx {
color: var(--color-docs-infra-syntax-jsx);
}

/* Diff ignored/untracked */
.di-ign {
color: var(--color-prettylights-syntax-markup-ignored-text);
background-color: var(--color-prettylights-syntax-markup-ignored-bg);
.di-ht {
color: var(--color-docs-infra-syntax-html-tag);
}

/* Diff range indicator */
.di-rng {
font-weight: bold;
color: var(--color-prettylights-syntax-meta-diff-range);
.di-jt {
color: var(--color-docs-infra-syntax-jsx-tag);
}

/* Special handling for CSS language */
.language-css {
--color-prettylights-syntax-variable: var(--color-navy);
}

/* 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 '(' */
Comment on lines -257 to -259
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);

.language-css .line > .pl-c1:first-of-type {
color: var(--color-foreground);
}

/* Inline code and highlighted characters - collapse most colors to blue */
.MdCode:not(pre .MdCode) {
.MdCode[data-inline] {
--color-prettylights-syntax-comment: var(--color-blue);
--color-prettylights-syntax-constant: var(--color-blue);
--color-prettylights-syntax-entity: var(--color-blue);
Expand Down
10 changes: 5 additions & 5 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading