MDX内で記述したコードフェンスは src/pages/[...slug].astro 内の設定により、この<CodeBlock>コンポーネントに変換されます。
```typescript
// コード
```
CodeBlock なら @/components/article/CodeBlock.astro、renderingComponent を指定したいなら @/components/article/DesignPatternCodeBlock を import してください。
この Astro コンポーネントには info string のパースや、データの取得、アイランドとして読み込む設定などが含まれています。
指定されたprops（MDX内で"```"に続いて指定されたinfo string）により、どのようにレンダリングするかを分岐しています。
react-liveを使って、ライブエディタをレンダリングします。コードの上には実行結果が表示され、コードの編集が反映されます。
さらに、renderingComponentが指定されている場合は、デザインパターンのStorybookへのリンクも表示します。
シンタックスハイライトを適用した（静的な）コードブロックを表示します。
iframe内にreact-liveが提供するライブエディタを表示します。このフレーム内にはsmarthr-normalize-cssが適用されています。
iframeの表示にはreact-frame-componentを利用しています。
ライブエディタでは、コードをTypeScriptとしてトランスパイルするようになっています。