MarkdownRenderer

Markdown を描画する。シンタックスハイライト込み。

Markdown 文字列を描画します。表・コードブロック（シンタックスハイライト付き）・数式まで扱える ので、LLM の出力や、データベースに入っている説明文をそのまま出すのに使えます。

export const client = "only";

import { MarkdownRenderer } from "@squadbase/vantage/markdown";

const content = `## 今週の所感

関東の売上が **前週比 +12.4%** と伸びました。要因は次の 2 点です。

1. 7/18 のキャンペーン
2. 新規顧客 128 件の獲得

| 地域 | 売上 | 前週比 |
| --- | --- | --- |
| 関東 | ¥640,000 | +12.4% |
| 関西 | ¥380,000 | -2.1% |

\`\`\`sql
select region, sum(amount) from sales group by 1
\`\`\`
`;

export default function Example() {
  return (
    <div className="w-[36rem] rounded-xl border p-5">
      <MarkdownRenderer content={content} />
    </div>
  );
}

import { MarkdownRenderer } from "@squadbase/vantage/markdown";

なぜ別のサブパスなのか

@squadbase/vantage/components からは意図的に再エクスポートしていません。Markdown の描画は Shiki の全言語文法を抱えており、import の辺があるだけでバンドラは落とせません。共有のバレルに 置くと、Markdown を使わないアプリのビルド出力まで約 11 MB / 300 ファイル増えます。

別サブパスにしてあるので、このコンポーネントを import したアプリだけがその重さを負担します。

// これは重い（そして、それでよい）
import { MarkdownRenderer } from "@squadbase/vantage/markdown";

// これは軽いまま
import { DashboardCardPreset } from "@squadbase/vantage/components";

LLM の出力を流す

content を差し替えるだけなので、ストリーミングされてくる途中の文字列をそのまま渡せます。 未完成の Markdown（閉じていないコードブロックなど）も壊れずに描画されます。

const [text, setText] = useState("");
// …チャンクが来るたびに setText((prev) => prev + chunk)

<MarkdownRenderer content={text} />;