この技術ブログで実装したすべてのコンポーネントの一覧（サンプルと解説付き）

マークダウン形式で表示できるコンポーネント

はじめに、マークダウン形式で表示されるコンポーネントを記載します。

コンポーネントの制御ファイル

これらの見た目や振る舞いはcomponents/contentにあるコンポーネントによって制御されています。 nuxt/content(v2)のProse Componentsを独自に上書きしてスタイルをあてています。

コンポーネントのサンプル

components/content配下にあるコンポーネントです。対応するMarkdown記述の見た目を制御します。

見出し

ConetntProseH2-6

見出し2〜見出し6までコンポーネントでスタイルを定義しています。

見出し2のテキスト

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

見出し3のテキスト

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

見出し4のテキスト

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

見出し5のテキスト

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

見出し6のテキスト

ここに本文が入ります。ここに本文が入ります。ここに本文が入ります。

リスト

ConetntProseUl/Li

• これはリストです。これはリストです。これはリストです。これはリストです。これはリストです。これはリストです。これはリストです。これはリストですこれはリストです。これはリストです。これはリストです。これはリストです。
• これはリストです。これはリストです。これはリストです。これはリストです。
• これはリストです。これはリストです。これはリストです。これはリストです。
• これはリストです。これはリストです。これはリストです。これはリストです。

ConetntProseOl/Li

1. これはリストです。これはリストです。これはリストです。これはリストです。これはリストです。これはリストです。これはリストです。これはリストですこれはリストです。これはリストです。これはリストです。これはリストです。
2. これはリストです。これはリストです。これはリストです。これはリストです。
3. これはリストです。これはリストです。これはリストです。これはリストです。
4. これはリストです。これはリストです。これはリストです。これはリストです。

テーブル

ConetntProseTable/Tbody/Thead/Th/Tr/Td

その他ブロック要素

ConetntProseP

ここに段落の本文が入ります。ここに段落の本文が入ります。ここに段落の本文が入ります。ここに段落の本文が入ります。ここに段落の本文が入ります。

ConetntProseCode

以下はコードブロックです。行指定のハイライトとコピーができます。

ConetntProseBlockquote

以下は引用です。

これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。これは引用です。

ConetntProseHr

これは区切り線です。

インライン要素

ConetntProseStrong

これは強調です。

ConetntProseImg

以下は画像です。

ConetntProseCodeInline

これはコードスパンです。

ConetntProseA

このように書くと…

このように表示されます。

mujiota.comでリンクが書けます。

こことこのリンクは同じになります。

独自に実装したコンポーネント

ここから先は独自に定義したコンポーネントを表示しています。

AppShopItemCard

AppSupplement