Skip to content

VS Code: highlight diagrams written :::mermaid ... ::: - #223

Merged
markbac merged 2 commits into
mainfrom
claude/vscode-div-diagrams
Nov 5, 2026
Merged

markbac merged 2 commits into
mainfrom
claude/vscode-div-diagrams

Conversation

@markbac

@markbac markbac commented Nov 5, 2026

Copy link
Copy Markdown
Owner

py-doc draws a diagram written in the Azure DevOps form, :::name … :::, for every diagram language (diagrams/scan.py). The extension highlighted only backtick fences, so a :::mermaid block showed as plain text. A real document with these blocks showed the gap.

Changes

  • :::name rules for every diagram language: syntaxes/pydoc-fences.markdown.tmLanguage.json has one beside each language's backtick-fence rule, ending at a line of only colons, as py-doc reads it. :::bpmnt uses the bpmn-text grammar. Poster blocks have no ::: form in py-doc, so none is added.
  • No overlap with the general ::: rule: the fenced-div rule in pydoc.markdown.tmLanguage.json now leaves these lines alone, so ::: notes and ::: {.pagebreak} are still highlighted as divs.
  • Troubleshooting: the README now covers another extension's grammar colouring ordinary words. This was the cause of the stray colours reported, likely a Mermaid extension that reads :::mermaid. The fix is to inspect a coloured word's scopes and, if none ends in .pydoc, disable the other extension for the workspace.
  • Version: 2.3.1, with a CHANGELOG entry.

Testing

  • New JS test: a :::mermaid block is highlighted as Mermaid, the paragraph after it is plain Markdown again, and ::: notes stays a div. It passes with the stand-in host and with VS Code 1.105's Markdown grammar.
  • New Python test: the ::: rules cover exactly the diagram fences py-doc's renderers define.
  • The reported document, run through the grammars with the real Markdown grammar:
    • both :::mermaid blocks come out as Mermaid;
    • no prose line picks up another language's scopes;
    • the xml block is meta.embedded.block.xml.
  • Results:
    • npm run lint && npm test: 32 passed, 1 skipped without the real grammar.
    • pytest tests/test_editor_grammar.py: 3 passed.
    • ruff is clean, and the README lints clean with Vale.
    • vsce package builds the 2.3.1 .vsix.

Generated by Claude Code

py-doc draws a diagram written in the Azure DevOps form, :::name ...
:::, for every diagram language, but the extension highlighted only
backtick fences, so a :::mermaid block showed as plain text. Each
diagram language now has a :::name rule beside its fence rule, and the
general fenced-div rule leaves those lines to it. A Python test keeps
the list in step with py-doc's renderers. The README's troubleshooting
covers another extension's grammar colouring ordinary words. 2.3.1.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WHtcxeRPPmXcydfxoEHGJ4
The first test builds the extension twice (npm ci and vsce) and runs
PowerShell three times. On a Windows runner that takes about two
minutes, at the edge of the suite's 120 s pytest timeout, and it went
over on #223. These tests now have 900 s, matching the
600 s each PowerShell run may take.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WHtcxeRPPmXcydfxoEHGJ4

markbac commented Nov 5, 2026

Copy link
Copy Markdown
Owner Author

Test (windows-latest) failed on 90a03fb with a pytest Timeout in tests/test_vscode_install_script.py (from #222). This PR doesn't change that script or test.

The cause is the test's time budget, not the code. The first test builds the real extension twice (npm ci, vsce package) and runs PowerShell three times. On a Windows runner that takes about two minutes, right at the suite's 120 s pytest-timeout: it passed narrowly on #222 and went over here.

Fixed in 562977a: those tests now have pytest.mark.timeout(900), matching the 600 s each PowerShell run may take. No test is skipped, and the assertions are unchanged.


Generated by Claude Code

@markbac
markbac merged commit 8a77eec into main Nov 5, 2026
6 checks passed
@markbac
markbac deleted the claude/vscode-div-diagrams branch November 5, 2026 16:16
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