[MarkdownViewer] Mermaid classDiagram with <<annotation>> fails with "Syntax error in text"

オープン 初心者向け
  • 何か問題がありますか？
#2,054 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

メンテナーはふだん 4 日以内に返信

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
75/100
issue の種類
バグ
明瞭さ
明確に書かれている
活発さ
活発
技術スタック
csharp, html, javascript
領域
desktop, documentation

調査の方向性

Read QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/md2html.html, focusing on the Mermaid fence handler and how its output is assigned to innerHTML. Check how the Markdown renderer exposes escapeHtml, then preview the supplied class diagram and confirm annotations such as <<interface>> render correctly while other Mermaid diagrams still work.

索引モデルが issue の本文から書いたものです。

説明

Environment

  • QuickLook version: 4.5.0
  • Plugin: QuickLook.Plugin.MarkdownViewer (bundled mermaid 11.13.0)
  • OS: Windows 11 24H2

Description

A Mermaid classDiagram that contains annotations such as <<interface>> fails to render in the Markdown preview and shows "Syntax error in text".
The same diagram renders correctly with mermaid 11.13.0 elsewhere (e.g. mermaid.live, standalone mermaid).

Steps to reproduce

Create a .md file with the following content and preview it with QuickLook:

classDiagram
  class IWeaponOutput {
    <<interface>>
    +Emit(ShotRequest request)
  }

Expected: Class box with the «interface» annotation.
Actual: "Syntax error in text".

Removing the <<interface>> line makes the diagram render correctly.

Cause

In QuickLook.Plugin/QuickLook.Plugin.MarkdownViewer/Resources/md2html.html, the mermaid fence content is inserted without HTML escaping:

if (lang === 'mermaid') {
  return '<div class="mermaid">' + str + '</div>';
}

The rendered output is then assigned to innerHTML, so the browser parses the diagram source as HTML. <<interface>> becomes an <interface> element (lowercased, with an auto-inserted closing tag), and mermaid receives corrupted text.
Any < followed by a letter in the diagram source is affected, e.g. <<ScriptableObject>>, <<enumeration>>, or generic text like List<T>.

Suggested fix

Escape the content before inserting it:

if (lang === 'mermaid') {
  return '<div class="mermaid">' + md.utils.escapeHtml(str) + '</div>';
}

(or markdownit().utils.escapeHtml(str) if md is not in scope at that point).
Mermaid decodes HTML entities when it reads the element's content, so the escaped source should render correctly.

主要言語
C#
スター
25.7k
フォーク
1.4k
平均マージ
4日 8分
マージ済み PR（30日）
3

環境構築

  • Dockerfile・Docker Compose ファイルなし
  • プルリクエストのテンプレートあり
  • コントリビューションガイドなし

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

QL-Win/QuickLook のほかの issue

QL-Win/QuickLook の issue をすべて見る

似ている issue

C# の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。