コメントの書式サポート

コメントには、拡張 Markdown 構文や HTML タグなど、さまざまな内容を追加できます。

対応する書式

標準の Markdown 構文である CommonMark に完全対応しており、次の拡張も利用できます：

• GFM 形式のテーブル
• GFM 形式の打ち消し線
• 下付き文字と上付き文字
• 絵文字
• コードブロックのハイライト
• $TEX$ 数式

GFM

Github Flavored Markdown

また、保護機構 を発動させることなく、任意の HTML コンテンツを自由に埋め込むことができます。

プレビューでの制限

クライアントのサイズを抑えるため、公式クライアント @waline/client には小さな Markdown パーサーのみを組み込んでいます。そのため、多くの文法がプレビューパネルで正しく表示されません（コメント欄では正しくレンダリングされます）。

具体的には次のような制限があります：

• 標準の絵文字構文（例：:tada:）は正しくレンダリングされません。

• 上付き・下付き文字（例：H~2~O、x^2^）は正しくレンダリングされません。

• $TEX$ 構文、つまり数式（例：$a = 1$）はデフォルトではレンダリングされません。

  公式クライアントを使う場合は、texRenderer オプションを設定することでプレビューでの $TEX$ レンダリングをカスタマイズできます。詳しくは クックブック → カスタム $TEX$ レンダラーの使用 を参照してください。

• デフォルトのハイライターでは、コードブロックは特定の区切り文字を含むランダムな色でハイライトされます。

  公式クライアントを使う場合は、highlighter オプションを設定することでプレビュー時のコードハイライトをカスタマイズできます。詳しくは クックブック → カスタムコードハイライト を参照してください。

補足

仕組み

1. パッケージサイズを考慮し、クライアントはレンダリングに marked を使用し、ハイライトにはデフォルトで 1KB 未満のハイライターを使い、$TEX$ レンダラーは含んでいません。その結果が上記の制限です。

2. ユーザーがコメントを送信すると、クライアントはカスタム絵文字の画像を埋め込み、元のコメントをサーバーに送信します。

3. サーバーは元のテキストを受け取り、関連するプラグインとともに markdown-it で Markdown を正しくレンダリングし、prismjs で言語に応じてコードブロックをハイライトし、ユーザー設定に従って $TEX$ レンダリングを行い、最後に XSS 処理を実行します。

4. 処理が完了すると、サーバーは正しくレンダリングされた内容を保存し、必要に応じてクライアントに返すことで、コメント欄が正常に表示されるようにします。