HTML + Markdown 混在テスト記事
#test#html#markdown
投稿日 2025/01/01
HTML + Markdown 混在テスト
この記事は HTML タグと Markdown の混在コンテンツをテストするためのものです。
基本的な HTML タグのテスト
Div コンテナ
これは HTML div 要素内のコンテンツです。
**Markdown の強調**も正しく動作するはずです。
スパン要素
通常のテキストの中に 赤い太字のスパン を含めることができます。
画像タグ
Markdown との混在
リストと HTML の組み合わせ
- 最初のアイテム
-
HTML div を含むアイテム
- 最後のアイテム
テーブルと HTML
| 列 1 | 列 2 | 列 3 |
|---|---|---|
| データ 1 | 緑色のデータ | データ 3 |
| データ 4 | データ 5 | 太字のデータ |
レスポンシブデザインのテスト
カード1
モバイルでは1列、タブレットでは2列、デスクトップでは3列で表示されます。
カード2
レスポンシブグリッドのテストです。
カード3
画面サイズに応じてレイアウトが変わります。
フォーム要素のテスト
テスト入力:
テキストエリア:
送信ボタン
メディア要素のテスト
動画埋め込み
音声埋め込み
数式との組み合わせ
HTML div 内での数式レンダリング:
アインシュタインの質量エネルギー等価性:
E=mc2E = mc^2E=mc2
この式は物理学の基本的な関係式です。
コードブロックとの組み合わせ
ターミナル風のスタイル:
npm install react-markdown
npm install rehype-raw rehype-sanitize
引用との組み合わせ
> これは HTML blockquote 要素です。 > > **Markdown の強調**も含まれています。
まとめ
この記事では様々な HTML タグと Markdown の組み合わせをテストしました。すべての要素が適切にレンダリングされ、セキュリティが保たれていることを確認してください。