Skip to content

Update fenced code block color legibility #2816

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

Open
Harjun751 wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Update fenced code block color legibility #2816

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7c133cd
Update highlighter styles
Harjun751 Feb 1, 2026
97794b6
Update functional tests, highlight unit tests
Harjun751 Feb 1, 2026
07c256c
Update documentation on new highlight rules
Harjun751 Feb 1, 2026
5e9a35f
Merge branch 'master' into fenced-code-block-colours
Harjun751 Feb 1, 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
24 changes: 12 additions & 12 deletions docs/userGuide/syntax/code.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -235,18 +235,18 @@ Note:
- `#e6e6fa` for light theme
- `#000000` for dark theme

Markbind provides support for the following shorthands

Letter | Colour
--- | ---
r | red
g | green
b | blue
c | cyan
m | magenta
y | yellow
k | black
w | white
Markbind provides support for the following shorthand colors that work well in both in-built code themes:

Letter | Light Theme | Dark Theme
--- | --- | ---
r | <span style="display:inline-block; width:20px; height:20px; background:rgb(255 121 115 / 40%); border-radius:3px; margin-right:5px;"></span> Pale red | <span style="display:inline-block; width:20px; height:20px; background:rgb(176 13 19 / 70%); border-radius:3px; margin-right:5px;"></span> Deep red
g | <span style="display:inline-block; width:20px; height:20px; background:rgb(0 255 0 / 70%); border-radius:3px; margin-right:5px;"></span> Soft green | <span style="display:inline-block; width:20px; height:20px; background:rgb(5 102 0 / 70%); border-radius:3px; margin-right:5px;"></span> Forest green
b | <span style="display:inline-block; width:20px; height:20px; background:rgb(124 153 255 / 50%); border-radius:3px; margin-right:5px;"></span> Light blue | <span style="display:inline-block; width:20px; height:20px; background:rgb(2 38 255 / 70%); border-radius:3px; margin-right:5px;"></span> Royal blue
c | <span style="display:inline-block; width:20px; height:20px; background:rgb(0 255 255 / 60%); border-radius:3px; margin-right:5px;"></span> Aqua cyan | <span style="display:inline-block; width:20px; height:20px; background:rgb(0 150 150 / 70%); border-radius:3px; margin-right:5px;"></span> Teal cyan
m | <span style="display:inline-block; width:20px; height:20px; background:rgb(255 100 255 / 70%); border-radius:3px; margin-right:5px;"></span> Bright magenta | <span style="display:inline-block; width:20px; height:20px; background:rgb(139 0 139 / 100%); border-radius:3px; margin-right:5px;"></span> Deep magenta
y | <span style="display:inline-block; width:20px; height:20px; background:rgb(255 255 0 / 70%); border-radius:3px; margin-right:5px;"></span> Warm yellow | <span style="display:inline-block; width:20px; height:20px; background:rgb(150 140 0 / 70%); border-radius:3px; margin-right:5px;"></span> Golden yellow
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
Comment on lines +248 to +249
Copy link

Copilot AI Feb 2, 2026

Choose a reason for hiding this comment

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

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 | <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
k | <span style="display:inline-block; width:20px; height:20px; background:rgb(217 217 217 / 100%); border-radius:3px; margin-right:5px;"></span> Light grey | <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> Pure white | <span style="display:inline-block; width:20px; height:20px; background:rgb(150 150 150 / 50%); border-radius:3px; margin-right:5px;"></span> Silver grey

Copilot uses AI. Check for mistakes.

Here are some example usage with the same examples as above:

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/bugs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body data-bs-spy="scroll" data-bs-target="#mb-page-nav" data-bs-offset="100">
<body data-bs-spy="scroll" data-bs-target="#mb-page-nav" data-bs-offset="100" data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/sub_site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion ...est/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAltFrontMatterInvalidKeyValue.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAltFrontMatterParsing.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAnchorGeneration.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAnnotate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testBootstrapIconInPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testCenterText.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testCodeBlocks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testDates.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testEmptyAltFrontMatter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">
<div>

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testEmptyFrontmatter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">
<div>

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testExternalScripts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">
<div>

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testFontAwesomeInPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testGlyphiconInPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testHr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testIconsInSiteLayout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testImages.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testIncludeBoilerplate.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testIncludeMultipleModals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testIncludePluginsRendered.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testLayouts.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">
<div>

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testLayoutsOverride.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">
<div>

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testLayoutsOverrideWithAltFrontmatter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">
<div>

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testLayoutsWithAltFrontMatter.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">
<div>

Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testLinks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testList.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testMaterialIconsInPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testMath.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testMermaid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testModals.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testNunjucksPathResolving.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testOcticonInPage.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testPageNav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body data-bs-spy="scroll" data-bs-target="#mb-page-nav" data-bs-offset="100">
<body data-bs-spy="scroll" data-bs-target="#mb-page-nav" data-bs-offset="100" data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testPageNavPrint.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body data-bs-spy="scroll" data-bs-target="#mb-page-nav" data-bs-offset="100">
<body data-bs-spy="scroll" data-bs-target="#mb-page-nav" data-bs-offset="100" data-code-theme="dark">
<div id="app">

<div>
Expand Down
2 changes: 1 addition & 1 deletion packages/cli/test/functional/test_site/expected/testPageNavTarget.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
const baseUrl = '/test_site'
</script>

<body>
<body data-code-theme="dark">
<div id="app">

<div>
Expand Down
Loading
Loading