Skip to content

markdown: Support triple-tilde Mermaid fences - #62257

Merged
smitbarmase merged 5 commits into
zed-industries:mainfrom
KimSeogyu:feature/markdown-tilde-mermaid
Aug 10, 2026
Merged

markdown: Support triple-tilde Mermaid fences#62257
smitbarmase merged 5 commits into
zed-industries:mainfrom
KimSeogyu:feature/markdown-tilde-mermaid

Conversation

@KimSeogyu

Copy link
Copy Markdown
Contributor

Objective

Zed's Markdown parser accepts tilde-fenced code blocks, but Mermaid extraction only strips backtick fences. As a result, a block like this is parsed as Mermaid while the fence itself is still passed to the renderer:

~~~mermaid
graph TD;
~~~

Solution

Teach the Markdown code-block helpers to recognize triple-tilde fences alongside triple-backtick fences.

The change stays in the existing parsing path, so Mermaid rendering does not need a separate special case. A regression test covers extraction from a tilde-fenced Mermaid block.

Testing

  • cargo fmt --all -- --check
  • cargo test -p markdown (138 tests)
  • ./script/clippy -p markdown
  • cargo build -p zed
  • Opened a ~~~mermaid block in the built Zed Dev app on macOS and verified that Markdown Preview renders the diagram

Self-Review Checklist:

  • I've reviewed my own diff for quality, security, and reliability
  • Unsafe blocks (if any) have justifying comments
  • The content adheres to Zed's UI standards (UX/UI and icon guidelines)
  • Tests cover the new/changed behavior
  • Performance impact has been considered and is acceptable

Release Notes:

  • Fixed Mermaid diagrams in Markdown previews when they use triple-tilde fences.

@cla-bot

cla-bot Bot commented Aug 6, 2026

Copy link
Copy Markdown

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: 김서규.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

@zed-community-bot zed-community-bot Bot added the first contribution the author's first pull request to Zed. NOTE: the label application is automated via github actions label Aug 6, 2026
@cla-bot

cla-bot Bot commented Aug 6, 2026

Copy link
Copy Markdown

Thank you for your pull request and welcome to our community. We could not parse the GitHub identity of the following contributors: 김서규.
This is most likely caused by a git client misconfiguration; please make sure to:

  1. check if your git client is configured with an email to sign commits git config --list | grep email
  2. If not, set it up using git config --global user.email email@example.com
  3. Make sure that the git commit email is configured in your GitHub account settings, see https://github.com/settings/emails

@KimSeogyu
KimSeogyu force-pushed the feature/markdown-tilde-mermaid branch from 5ce784d to b614d81 Compare August 6, 2026 07:44
@cla-bot

cla-bot Bot commented Aug 6, 2026

Copy link
Copy Markdown

We require contributors to sign our Contributor License Agreement, and we don't have @KimSeogyu on file. You can sign our CLA at https://zed.dev/cla. Once you've signed, post a comment here that says '@cla-bot check'.

Copy link
Copy Markdown
Contributor Author

@cla-bot check

@cla-bot cla-bot Bot added the cla-signed The user has signed the Contributor License Agreement label Aug 6, 2026
@cla-bot

cla-bot Bot commented Aug 6, 2026

Copy link
Copy Markdown

The cla-bot has been summoned, and re-checked this pull request!

@KimSeogyu
KimSeogyu marked this pull request as ready for review August 6, 2026 12:59
@smitbarmase smitbarmase added the area:preview/mermaid Feedback for Zed's Mermaid diagram support label Aug 7, 2026

@smitbarmase smitbarmase 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.

Thanks! I pushed two commits to align the implementation with CommonMark:

  • Code fences can contain three or more characters. With a valid block like ~~~~mermaid ... ~~~~, stripping exactly three characters left a trailing ~ in the Mermaid source. We now strip the complete closing fence.
  • A closing fence must use the same character as the opener and be at least as long. For example, ```mermaid ... ~~~ is not closed, so we no longer mark it as such.

I added regression tests for both cases.

Thanks again.

@smitbarmase
smitbarmase enabled auto-merge August 10, 2026 12:50
@smitbarmase smitbarmase self-assigned this Aug 10, 2026
@smitbarmase
smitbarmase added this pull request to the merge queue Aug 10, 2026
Merged via the queue into zed-industries:main with commit 4bd1993 Aug 10, 2026
37 checks passed
playdohface pushed a commit to playdohface/zed that referenced this pull request Aug 29, 2026
# Objective

Zed's Markdown parser accepts tilde-fenced code blocks, but Mermaid
extraction only strips backtick fences. As a result, a block like this
is parsed as Mermaid while the fence itself is still passed to the
renderer:

```markdown
~~~mermaid
graph TD;
~~~
```

## Solution

Teach the Markdown code-block helpers to recognize triple-tilde fences
alongside triple-backtick fences.

The change stays in the existing parsing path, so Mermaid rendering does
not need a separate special case. A regression test covers extraction
from a tilde-fenced Mermaid block.

## Testing

- `cargo fmt --all -- --check`
- `cargo test -p markdown` (138 tests)
- `./script/clippy -p markdown`
- `cargo build -p zed`
- Opened a `~~~mermaid` block in the built Zed Dev app on macOS and
verified that Markdown Preview renders the diagram

## Self-Review Checklist:

- [x] I've reviewed my own diff for quality, security, and reliability
- [x] Unsafe blocks (if any) have justifying comments
- [x] The content adheres to Zed's UI standards
([UX/UI](https://github.com/zed-industries/zed/blob/main/CONTRIBUTING.md#uiux-checklist)
and
[icon](https://github.com/zed-industries/zed/blob/main/crates/icons/README.md)
guidelines)
- [x] Tests cover the new/changed behavior
- [x] Performance impact has been considered and is acceptable

---

Release Notes:

- Fixed Mermaid diagrams in Markdown previews when they use triple-tilde
fences.

---------

Co-authored-by: Smit Barmase <heysmitbarmase@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area:preview/mermaid Feedback for Zed's Mermaid diagram support cla-signed The user has signed the Contributor License Agreement first contribution the author's first pull request to Zed. NOTE: the label application is automated via github actions

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants