Skip to content

Enable Prism highlighting and fix code-block display#553

Open
sboldyreva wants to merge 1 commit into
cloudlinux:masterfrom
sboldyreva:claude/fix-code-block-display
Open

Enable Prism highlighting and fix code-block display#553
sboldyreva wants to merge 1 commit into
cloudlinux:masterfrom
sboldyreva:claude/fix-code-block-display

Conversation

@sboldyreva
Copy link
Copy Markdown
Collaborator

The @vuepress/plugin-prismjs package shipped in package.json but was never registered, so fences with a language hint (bash, json,

:not(.language-text) > code rule that painted any non-text block's text
in dark blue (#1f3f5b) and a code-fade-mask gradient that assumed a dark
background variable nobody set, this rendered as dark-blue-on-black
strips on the right side of every highlighted block.

Changes:

* Register prismjsPlugin in config-user/plugins.ts so language hints are
  tokenised at build time.
* Scope the inline-code rule to :not(pre):not(.language-text) > code so
  the global #1f3f5b color and light-gray background only apply to
  inline <code>, not to <pre><code> inside .language-* blocks.
* Set --code-bg-color: #2d2d2d (the project's original dark surface)
  and apply it to every language-* wrapper, with #ccc as the default
  text/punctuation color, matching the pre-Prism appearance.
* Add a One-Dark-inspired Prism token palette scoped to
  div[class*="language-"] so bash/json/yaml/php blocks render with
  readable colors on the dark background.
* Unify font-size: 12px across every language-* block so highlighted
  blocks no longer render larger than plain `text` blocks.
* Re-tint the code-fade-mask gradient to the same #2d2d2d background so
  the right-edge fade blends with the block.
* Scope the ELSSteps :deep(code) override to :not(pre) > code so block
  code inside steps uses the unified 12px size while inline code keeps
  the slightly smaller 0.85rem.
* Indent the bullet sub-items under steps 1 and 2 in the AlmaLinux
  enterprise-support doc so they render inside the numbered list
  instead of after it.

The `@vuepress/plugin-prismjs` package shipped in package.json but was
never registered, so fences with a language hint (```bash, ```json,
```markdown, ...) produced no tokens. Combined with a global
:not(.language-text) > code rule that painted any non-text block's text
in dark blue (#1f3f5b) and a code-fade-mask gradient that assumed a dark
background variable nobody set, this rendered as dark-blue-on-black
strips on the right side of every highlighted block.

Changes:

* Register prismjsPlugin in config-user/plugins.ts so language hints are
  tokenised at build time.
* Scope the inline-code rule to :not(pre):not(.language-text) > code so
  the global #1f3f5b color and light-gray background only apply to
  inline <code>, not to <pre><code> inside .language-* blocks.
* Set --code-bg-color: #2d2d2d (the project's original dark surface)
  and apply it to every language-* wrapper, with #ccc as the default
  text/punctuation color, matching the pre-Prism appearance.
* Add a One-Dark-inspired Prism token palette scoped to
  div[class*="language-"] so bash/json/yaml/php blocks render with
  readable colors on the dark background.
* Unify font-size: 12px across every language-* block so highlighted
  blocks no longer render larger than plain `text` blocks.
* Re-tint the code-fade-mask gradient to the same #2d2d2d background so
  the right-edge fade blends with the block.
* Scope the ELSSteps :deep(code) override to :not(pre) > code so block
  code inside steps uses the unified 12px size while inline code keeps
  the slightly smaller 0.85rem.
* Indent the bullet sub-items under steps 1 and 2 in the AlmaLinux
  enterprise-support doc so they render inside the numbered list
  instead of after it.

https://claude.ai/code/session_01RnQn6mjZMSy5kGjwJaWVeF
@sboldyreva sboldyreva requested a review from yel-hadd May 20, 2026 20:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants