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 (58f396f) to head (f5278b9).

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #2816   +/-   ##
=======================================
  Coverage   71.85%   71.85%           
=======================================
  Files         134      134           
  Lines        7340     7340           
  Branches     1563     1625   +62     
=======================================
  Hits         5274     5274           
+ Misses       2020     1938   -82     
- Partials       46      128   +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.

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

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.

I was thinking of this, but figured not to because the other attributes that are set (like data-bs-spy) are not included in this file. TBH, I'm not too sure why. Appreciate direction on this.

It seems like that content of the mock template is only used as a placeholder, (i.e. used to put a file at that path in the fake memory drive for testing) where the actual content inside the file is never read or rendered by any test.

The more important part of the code seems to be

export const PAGE_NJK = { [path.join(__dirname, '../../../src/Page/page.njk')]: PAGE_NJK_LITERAL, };

In this case, maybe it would be a good idea to update the PAGE_NJK_LITERAL to

const PAGE_NJK_STUB = '<html></html>';

so that it doesn't cause confusion like in this case, maybe can open Issue to refactor the testcases, test structure, test stubs etc. and open a PR if you wish to tackle this refactor

docs/userGuide/syntax/code.md

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

gerteck

LGTM, maybe open an issue regarding PAGE_NJK_LITERAL as per comments? @Harjun751

Not related to the content of the PR though.

gerteck · 2026-02-02T14:39:53Z

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

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


It seems like that content of the mock template is only used as a placeholder, (i.e. used to put a file at that path in the fake memory drive for testing) where the actual content inside the file is never read or rendered by any test.

The more important part of the code seems to be

export const PAGE_NJK = { [path.join(__dirname, '../../../src/Page/page.njk')]: PAGE_NJK_LITERAL, };

In this case, maybe it would be a good idea to update the PAGE_NJK_LITERAL to

const PAGE_NJK_STUB = '<html></html>';

so that it doesn't cause confusion like in this case, maybe can open Issue to refactor the testcases, test structure, test stubs etc. and open a PR if you wish to tackle this refactor

gerteck · 2026-02-02T14:45:53Z

this is a super minor nit, but one suggestion would be to swap the last two rows (black and white) in the documentation.

This is so that the white will be contrasted against the grey row background, haha.
All the greys seem to be different colors so it won't just repeat the issue

Will merge this PR in a day to give you some time in case you want to update that

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

Harjun751 and others added 2 commits February 2, 2026 20:33

Update color naming in code highlight section

f31df9f

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

f5278b9

gerteck approved these changes 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 •

edited by gerteck

Loading

Uh oh!

codecov bot commented Feb 1, 2026 •

edited

Loading

Uh oh!

gerteck commented Feb 2, 2026

Uh oh!

Harjun751 commented Feb 2, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Copilot AI Feb 2, 2026

Uh oh!

Harjun751 Feb 2, 2026

Uh oh!

gerteck Feb 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

gerteck left a comment •

edited

Loading

Uh oh!

gerteck Feb 2, 2026 •

edited

Loading

Uh oh!

gerteck commented Feb 2, 2026 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

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 • edited by gerteck Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Update highlighter styles for legibility

Uh oh!

codecov bot commented Feb 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

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!

Uh oh!

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

Harjun751 Feb 2, 2026

Choose a reason for hiding this comment

Uh oh!

gerteck Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

gerteck left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gerteck Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

gerteck commented Feb 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Harjun751 commented Feb 1, 2026 •

edited by gerteck

Loading

codecov bot commented Feb 1, 2026 •

edited

Loading

gerteck Feb 2, 2026 •

edited

Loading

gerteck left a comment •

edited

Loading

gerteck Feb 2, 2026 •

edited

Loading

gerteck commented Feb 2, 2026 •

edited

Loading