Update fenced code block color legibility #2816

Harjun751 · 2026-02-01T12:25:40Z

What is the purpose of this pull request?

Resolves #2800

Overview of changes:
Updates current code highlighting shorthands to use predefined CSS variables. The variables are set to colors that maintain legibility in two of the respective code themes in markbind. How specific colors are selected is by using an attribute-selector that looks for the data-code-theme value that is set in the body.

The data-code-theme is set by using the site.json values and injecting into the nunjucks template, much like the various other settings.

Anything you'd like to highlight/discuss:
The large amount of files changed is due to the body tag having the data-code-theme attribute set, meaning that many of the functional tests' "expected" files had to change.

You can see how the colours look in the linked issue above.

Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Update highlighter styles for legibility

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

Reviewer checklist:

Indicate the SEMVER impact of the PR:

Major (when you make incompatible API changes)
Minor (when you add functionality in a backward compatible manner)
Patch (when you make backward compatible bug fixes)

At the end of the review, please label the PR with the appropriate label: r.Major, r.Minor, r.Patch.

Breaking change release note preparation (if applicable):

To be included in the release note for any feature that is made obsolete/breaking

Give a brief explanation note about:

what was the old feature that was made obsolete

any replacement feature (if any), and

how the author should modify his website to migrate from the old feature to the replacement feature (if possible).

Highlight styles are too dark to be legible, and they don't account for dark/light code block themes. Let's * Use CSS variables for highlighter styles * Update site page processing to set data-code-theme on body based on site config * Add in CSS rules that set a suitable highlight colour in the variables based on the data-code-theme

Due to new data-code-theme attribute on body, html output is different. This requires us to update the test script built output to match the expected value.

codecov · 2026-02-01T12:29:18Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 71.85%. Comparing base (b956547) to head (5e9a35f).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2816   +/-   ##
=======================================
  Coverage   71.85%   71.85%           
=======================================
  Files         134      134           
  Lines        7340     7340           
  Branches     1565     1623   +58     
=======================================
  Hits         5274     5274           
- Misses       1938     2020   +82     
+ Partials      128       46   -82

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

gerteck · 2026-02-02T07:24:49Z

Change made for easy viewing:

is the light grey supposed to be white instead? @Harjun751

Harjun751 · 2026-02-02T07:28:20Z

I will update the wording, thanks for flagging that.

Copilot

Pull request overview

This PR updates the fenced code block highlighting colors to improve legibility across MarkBind's built-in code themes. The implementation changes the color shorthand system from hardcoded CSS color names to CSS variables that adapt based on the selected code theme.

Changes:

Modified color mappings in HighlightRule.ts to use CSS variables (e.g., var(--red)) instead of hardcoded color names
Added theme-specific CSS variable definitions for light and dark code themes in markbind.css
Injected data-code-theme attribute into the body tag via the Nunjucks template to enable theme-aware styling
Updated documentation to show color swatches and descriptions for both light and dark themes
Updated functional test expected outputs to reflect the new body tag attribute

Reviewed changes

Copilot reviewed 115 out of 116 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/core/src/lib/markdown-it/highlight/HighlightRule.ts	Changed color mappings from hardcoded strings to CSS variable references
packages/core-web/src/styles/markbind.css	Added CSS variable definitions for 8 colors in both light and dark theme variants
packages/core/src/Page/page.njk	Added data-code-theme attribute to body tag for theme-aware CSS selection
packages/core/src/Page/index.ts	Passed codeTheme from siteConfig to template context
packages/core/test/unit/lib/markdown-it/highlight/HighlightRule.test.ts	Updated test expectations to reflect CSS variable usage
packages/core/test/unit/utils/data.ts	Updated mock template with trailing space (incomplete update)
docs/userGuide/syntax/code.md	Enhanced documentation with visual color swatches and theme-specific descriptions
packages/cli/test/functional/.../expected/*.html (70+ files)	Updated expected HTML outputs with data-code-theme="light" or "dark" attributes

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-02T07:30:33Z

packages/core-web/src/styles/markbind.css

+/** Light code theme variables **/
+[data-code-theme="light"] {
+    --red: rgb(255 121 115 / 40%);
+    --green: rgb(0 255 0 / 70%);
+    --blue: rgb(124 153 255 / 50%);
+    --cyan: rgb(0 255 255 / 60%);
+    --magenta: rgb(255 100 255 / 70%);
+    --yellow: rgb(255 255 0 / 70%);
+    --black: rgb(217 217 217 / 100%);
+    --white: rgb(255 255 255 / 100%);
+}
+
+/** Dark code theme variables **/
+[data-code-theme="dark"] {
+    --red: rgb(176 13 19 / 70%);
+    --green: rgb(5 102 0 / 70%);
+    --blue: rgb(2 38 255 / 70%);
+    --cyan: rgb(0 150 150 / 70%);
+    --magenta: rgb(139 0 139 / 100%);
+    --yellow: rgb(150 140 0 / 70%);
+    --black: rgb(0 0 0 / 100%);
+    --white: rgb(150 150 150 / 50%);
+}


The CSS variable definitions for the highlight colors lack fallback values. If an element is rendered before the CSS is loaded, or if the data-code-theme attribute is missing or has an invalid value, the CSS variables will be undefined, causing the highlights to not render with any background color. Consider adding default variable definitions in the :root selector as fallbacks.

Copilot · 2026-02-02T07:30:34Z

packages/core/test/unit/utils/data.ts

    {% endif %}
 </head>
-<body>
+<body >


The PAGE_NJK_LITERAL mock template should be updated to match the actual page.njk template structure. The trailing space after 'body' appears incomplete and doesn't include the new data-code-theme attribute that was added to the actual template in page.njk. While this mock is simplified, it should still reflect the key structural changes for consistency in testing.

Copilot · 2026-02-02T07:30:34Z

docs/userGuide/syntax/code.md

+k | <span style="display:inline-block; width:20px; height:20px; background:rgb(217 217 217 / 100%); border-radius:3px; margin-right:5px;"></span> Dark black | <span style="display:inline-block; width:20px; height:20px; background:rgb(0 0 0 / 100%); border-radius:3px; margin-right:5px;"></span> Pure black
+w | <span style="display:inline-block; width:20px; height:20px; background:rgb(255 255 255 / 100%); border-radius:3px; margin-right:5px;"></span> Light grey | <span style="display:inline-block; width:20px; height:20px; background:rgb(150 150 150 / 50%); border-radius:3px; margin-right:5px;"></span> Silver grey


The color descriptions for 'k' (black) and 'w' (white) in the Light Theme column appear to be inconsistent with the actual CSS color values. The CSS defines --black as rgb(217 217 217 / 100%) which is a light gray, but the documentation describes it as "Dark black". Similarly, --white is defined as rgb(255 255 255 / 100%) which is pure white, but the documentation describes it as "Light grey". The descriptions should match the actual rendered colors for clarity.

Suggested change

k | Dark black | Pure black

w | Light grey | Silver grey

k | Light grey | Pure black

w | Pure white | Silver grey

Copilot · 2026-02-02T07:30:34Z

packages/core-web/src/styles/markbind.css

+    --magenta: rgb(255 100 255 / 70%);
+    --yellow: rgb(255 255 0 / 70%);
+    --black: rgb(217 217 217 / 100%);
+    --white: rgb(255 255 255 / 100%);


The 'w' (white) color for the light theme is defined as pure white rgb(255 255 255 / 100%), which may have insufficient contrast when used as a highlight background color against the typical light-colored code block backgrounds. Consider using a slightly darker or more saturated color that maintains visibility while still being distinct from the black/gray option.

Harjun751 and others added 4 commits February 1, 2026 19:31

Update functional tests, highlight unit tests

97794b6

Due to new data-code-theme attribute on body, html output is different. This requires us to update the test script built output to match the expected value.

Update documentation on new highlight rules

07c256c

Merge branch 'master' into fenced-code-block-colours

5e9a35f

Harjun751 requested a review from Incogdino February 2, 2026 05:44

gerteck requested a review from Copilot February 2, 2026 07:25

Copilot started reviewing on behalf of gerteck February 2, 2026 07:25 View session

Copilot AI reviewed Feb 2, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update fenced code block color legibility #2816

Update fenced code block color legibility #2816

Harjun751 commented Feb 1, 2026

Uh oh!

codecov bot commented Feb 1, 2026

Uh oh!

gerteck commented Feb 2, 2026

Uh oh!

Harjun751 commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		k \| <span style="display:inline-block; width:20px; height:20px; background:rgb(217 217 217 / 100%); border-radius:3px; margin-right:5px;"></span> Dark black \| <span style="display:inline-block; width:20px; height:20px; background:rgb(0 0 0 / 100%); border-radius:3px; margin-right:5px;"></span> Pure black
		w \| <span style="display:inline-block; width:20px; height:20px; background:rgb(255 255 255 / 100%); border-radius:3px; margin-right:5px;"></span> Light grey \| <span style="display:inline-block; width:20px; height:20px; background:rgb(150 150 150 / 50%); border-radius:3px; margin-right:5px;"></span> Silver grey

Update fenced code block color legibility #2816

Are you sure you want to change the base?

Update fenced code block color legibility #2816

Conversation

Harjun751 commented Feb 1, 2026

Update highlighter styles for legibility

Uh oh!

codecov bot commented Feb 1, 2026

Codecov Report

Uh oh!

gerteck commented Feb 2, 2026

Uh oh!

Harjun751 commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants