Skip to content

[Feature] マークダウンレンダリングの改善(余白調整・シンタックスハイライト・コピーボタン・ネストコードブロック) #54

Description

@ktmage

Description

チャットメッセージ内のマークダウンレンダリングに以下の問題・不足がある:

  1. 箇条書き(リスト)の項目間の余白が広すぎる: サイドバーの限られた幅に対して、情報量あたりの占有面積が大きく、スクロール量が増える
  2. コードブロックにシンタックスハイライトがない: marked でパースした結果をそのまま表示しているため、言語に応じた色分けがされない
  3. コードブロックにコピーボタンがない: コードを手動で選択・コピーする必要がある
  4. ネストされたコードブロックのレンダリングが崩れる: エージェントがマークダウンのコードブロックを出力する際、内部にコードフェンス(```)を含むとパーサーが外側のフェンスの終端と誤認し、表示が崩れる

Motivation

  • 余白が多いと情報密度が下がり、サイドバーの狭い幅では可読性に影響する
  • シンタックスハイライト・コピーボタンはコードブロックの基本的な UX 期待値
  • ネストコードブロックはエージェントがマークダウンファイルの内容を出力する際によく発生するパターンであり、正しく表示される必要がある

Proposed Solution

  1. 箇条書き余白の調整: MessageItem.module.css 内の .markdown スコープでリストアイテムの余白を見直す
  2. シンタックスハイライトの導入: highlight.js や shiki 等を導入し、marked と連携して言語別ハイライトを適用する
  3. コードブロックのコピーボタン: marked のカスタムレンダラーでコピーボタンを追加し、イベントデリゲーションで処理する
  4. ネストコードブロック対策: marked.parse() に渡す前にテキストを前処理し、コードブロック内にフェンスが含まれる場合、外側のフェンスをより長いバッククォート列に自動置換する

受け入れ条件

  • 箇条書きの項目間の余白がコンパクトになっている
  • コードブロックが言語に応じてシンタックスハイライトされている
  • コードブロックにコピーボタンがあり、クリックでクリップボードにコピーされる
  • コードブロック内にコードフェンスが含まれていても正しくレンダリングされる
  • 既存のマークダウンスタイル(インラインコード、段落等)を壊していない

Activity

  1. added 2 commits that reference this issue on Mar 1, 2026
  2. self-assigned this
    on Mar 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions