PackagesUIComponents
MarkdownViewer
Markdownテキストをスタイル付きHTMLとして表示する読み取り専用コンポーネント。
いつ使うか
- ユーザーが入力したMarkdownテキスト（読書ノート、備考欄、説明文など）を表示する
- APIから取得したMarkdownコンテンツを整形して表示する
いつ使わないか
- MDXファイルのレンダリングには使わない。Fumadocs等のMDXランタイムを使用する
- リッチテキストエディタの出力には使わない。エディタ固有のレンダラーを使用する
Usage
import { MarkdownViewer } from '@bi-shop-it/ui/markdown-viewer';
<MarkdownViewer content="## 見出し\n\nテキスト" />;Props
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
content | string | — | 表示するMarkdownテキスト |
size | 'sm' | 'md' | 'md' | テキストの大きさ。sm はテーブルセル等の狭い領域向け |
バリエーション
デフォルト
以下の content を渡した場合の表示結果。
見出し1
見出し2
見出し3
これは段落のテキスト。太字や斜体、インラインコードを含む。
引用テキスト。書籍やドキュメントからの抜粋に使用する。
- 順序なしリストの項目1
- 順序なしリストの項目2
- 順序なしリストの項目3
- 順序ありリストの項目1
- 順序ありリストの項目2
- 順序ありリストの項目3
リンクテキストを文中に埋め込める。
| 項目 | 説明 | 数量 |
|---|---|---|
| りんご | 赤い果物 | 3 |
| バナナ | 黄色い果物 | 5 |
| ぶどう | 紫の果物 | 12 |
水平線の下のテキスト。
const content = `# 見出し1
## 見出し2
### 見出し3
これは段落のテキスト。**太字**や*斜体*、\`インラインコード\`を含む。
> 引用テキスト。書籍やドキュメントからの抜粋に使用する。
- 順序なしリストの項目1
- 順序なしリストの項目2
- 順序なしリストの項目3
1. 順序ありリストの項目1
2. 順序ありリストの項目2
3. 順序ありリストの項目3
[リンクテキスト](https://example.com)を文中に埋め込める。
---
水平線の下のテキスト。`;
<MarkdownViewer content={content} />;Small
size="sm" で文字サイズと行間が小さくなる。同じ content を渡した場合の表示結果。
見出し1
見出し2
見出し3
これは段落のテキスト。太字や斜体、インラインコードを含む。
引用テキスト。書籍やドキュメントからの抜粋に使用する。
- 順序なしリストの項目1
- 順序なしリストの項目2
- 順序なしリストの項目3
- 順序ありリストの項目1
- 順序ありリストの項目2
- 順序ありリストの項目3
リンクテキストを文中に埋め込める。
| 項目 | 説明 | 数量 |
|---|---|---|
| りんご | 赤い果物 | 3 |
| バナナ | 黄色い果物 | 5 |
| ぶどう | 紫の果物 | 12 |
水平線の下のテキスト。
<MarkdownViewer content={content} size="sm" />対応する Markdown 記法
| Markdown 記法 | 出力される HTML | 説明 |
|---|---|---|
# テキスト | <h1> | 見出し1 |
## テキスト | <h2> | 見出し2 |
### テキスト | <h3> | 見出し3 |
#### テキスト | <h4> | 見出し4 |
##### テキスト | <h5> | 見出し5 |
###### テキスト | <h6> | 見出し6 |
テキスト | <p> | 段落 |
**テキスト** | <strong> | 太字 |
*テキスト* | <em> | 斜体 |
`テキスト` | <code> | インラインコード |
[テキスト](URL) | <a> | リンク |
> テキスト | <blockquote> | 引用 |
- 項目 | <ul> / <li> | 順序なしリスト |
1. 項目 | <ol> / <li> | 順序ありリスト |
--- | <hr> | 水平線 |
アクセシビリティ
コンポーネントが内部で処理すること
- Markdownの構造をセマンティックなHTML要素（
<h2>,<ul>,<blockquote>等）としてレンダリングする - リンクはネイティブの
<a>タグとして出力され、キーボード操作可能である
利用者が対応すること
- 特になし
関連コンポーネント
Card— MarkdownViewerをカード内に配置する場合に使用する