Skip to content

fix(markdown): only highlight code blocks with explicit language class#559

Open
lezi-fun wants to merge 2 commits into
OpenListTeam:mainfrom
lezi-fun:fix/markdown-no-auto-highlight
Open

fix(markdown): only highlight code blocks with explicit language class#559
lezi-fun wants to merge 2 commits into
OpenListTeam:mainfrom
lezi-fun:fix/markdown-no-auto-highlight

Conversation

@lezi-fun

@lezi-fun lezi-fun commented Jun 25, 2026

Copy link
Copy Markdown

Summary / 摘要

hljs.highlightAll() applies auto-detection to all <pre><code> blocks,
including those without a language-* class from code fences with no
language specified. This causes random highlighting on plain text blocks.

Replaced with selective highlightElement() — only target code blocks
that have an explicit language-* class, skip language-plain.

  • This PR has breaking changes.
    / 此 PR 包含破坏性变更。
  • This PR changes public API, config, storage format, or migration behavior.
    / 此 PR 修改了公开 API、配置、存储格式或迁移行为。
  • This PR requires corresponding changes in related repositories.
    / 此 PR 需要关联仓库同步修改。

Related repository PRs / 关联仓库 PR:

  • OpenList:
  • OpenList-Docs:

Related Issues / 关联 Issue

Closes OpenListTeam/OpenList#2342

Testing / 测试

  • go test ./...
  • Manual test / 手动测试: Built and deployed locally with a /tmp/test
    directory containing the exact code blocks from the issue
    (SQL Server keys, rarreg.key, VMware keys). Plain code blocks
    no longer show random highlighting.

Checklist / 检查清单

  • I have read CONTRIBUTING.
    / 我已阅读 CONTRIBUTING
  • I confirm this contribution follows the repository license, contribution policy, and code of conduct.
    / 我确认此贡献符合仓库许可证、贡献规范和行为准则。
  • I have formatted the changed code with prettier where applicable.
    / 我已按适用情况使用 prettier 格式化变更代码。
  • I have requested review from relevant maintainers or code owners where applicable.
    / 我已在适用情况下请求相关维护者或代码所有者审查。

AI Disclosure / AI 使用声明

  • This PR includes AI-assisted content.
    / 此 PR 包含 AI 辅助内容。

Tools used / 使用工具:

  • ChatGPT
  • Codex
  • GitHub Copilot
  • Claude
  • Gemini
  • Other (please specify) / 其他(请注明): DeepSeek

Usage scope / 使用范围:

  • Code generation / 代码生成

  • Refactoring / 重构

  • Documentation / 文档

  • Tests / 测试

  • Translation / 翻译

  • Review assistance / 审查辅助

  • I have reviewed and validated all AI-assisted content included in this PR.
    / 我已审核并验证此 PR 中的所有 AI 辅助内容。

  • I have ensured that all AI-assisted commits include Co-Authored-By attribution.
    / 我已确保所有 AI 辅助提交都包含 Co-Authored-By 归属信息。

  • I can reproduce all AI-assisted content included in this PR without any AI tools.
    / 我可以在没有任何 AI 工具的情况下重现此 PR 中包含的所有 AI 辅助内容。

hljs.highlightAll() applies auto-detection to all <pre><code> blocks,
including those without a language-* class from markdown code fences
with no language specified.

Replace with selective highlightElement(): only target code blocks
that have an explicit language-* class, skip language-plain.

Closes OpenListTeam/OpenList#2342
jyxjjj
jyxjjj previously requested changes Jun 25, 2026

@jyxjjj jyxjjj left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I don’t think this fixes the root cause. When I investigated the original issue, many fenced code blocks without an explicit language had already been assigned generated language-* classes, so selecting pre code[class*="language-"] will still match those incorrectly classified blocks.

Also, the PR description does not comply with the repository’s Pull Request template. Please keep the template intact and fill in the required fields instead of modifying its structure or content.

@lezi-fun

Copy link
Copy Markdown
Author

@jyxjjj Thanks for the review!

many fenced code blocks without an explicit language had already been assigned generated language-* classes

This is actually a misunderstanding — let me clarify the rendering pipeline:

  1. remark-rehype processes the markdown AST:
    • For ```javascript → generates <pre><code class="language-javascript">
    • For ``` (no language) → generates <pre><code> with NO language-* class
  2. rehype-sanitize config allows language-* classes but does not add them
  3. Then hljs.highlightAll() auto-detects for ALL blocks, including plain ones — and adds classes as a side effect

The language-scss observed in the issue is added by hljs during auto-detection, not by remark-rehype. This is exactly the root cause: hljs.highlightAll() is over-eager. Our fix is correct: by the time our code runs, plain code blocks have no language-* class, so [class*="language-"] correctly excludes them.

I also tested on both versions to verify:

  • v4.2.2 (Commit: b28208bd, Frontend: v4.2.2, Build: 2026-05-25): the affected files from the issue (SQL Server keys, rarreg.key, VMware keys) all show random highlighting on plain code blocks.
  • This branch (same backend, patched frontend): the same files render correctly — plain code blocks are no longer highlighted, while blocks with explicit language tags continue to work as before.

@jyxjjj

jyxjjj commented Jun 25, 2026

Copy link
Copy Markdown
Member

One minor follow-up: should we also skip language-plaintext and possibly language-text, not only language-plain?

Also, it may be safer to check hljs.getLanguage(lang) before calling highlightElement(), so unknown language classes do not trigger unnecessary Highlight.js handling.

- Add language-plaintext and language-text to the skip set
- Use hljs.getLanguage() to verify the language is supported by Highlight.js
  before calling highlightElement(), preventing unnecessary handling of
  unknown language classes
@lezi-fun

Copy link
Copy Markdown
Author

Good suggestions — updated in 99844dc:

  • Added language-plaintext and language-text to the skip set
  • Added hljs.getLanguage() check before highlightElement(), so unknown language classes (e.g. language-foobar) are silently skipped instead of triggering unnecessary Highlight.js handling

@jyxjjj jyxjjj dismissed their stale review June 25, 2026 01:12

Resolved

@xrgzs xrgzs changed the title fix(markdown): only highlight code blocks with explicit language class fix(markdown): skip plaintext/text and check hljs.getLanguage() Jun 25, 2026
@xrgzs xrgzs changed the title fix(markdown): skip plaintext/text and check hljs.getLanguage() fix(markdown): only highlight code blocks with explicit language class Jun 25, 2026
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.

[BUG] OpenList在渲染markdown普通代码块时(例如网站readme文件)会存在对于一些字段的随机高亮(每个版本策略不同)

2 participants