Astro のマークダウン

(2024-04-10)

Astro ではマークダウンのコードがすべて機能しているわけではないようです。

テーブル

| TH | TH |
| ---- | ---- |
| TD | TD |
| TD | TD |

上のようなコードをマークダウンに貼り付けても、以下のように th の背景色・ボーダーは表示されません。

THTH
TDTD
TDTD

本来は以下のようになるようですが。

TH TH
TD TD
TD TD

これは、以下のような html を貼り付けています。

<table class="border border-gray-300 border-collapse">
  <thead>
    <tr>
      <th class="border border-gray-300 p-2 bg-gray-100">TH</th>
      <th class="border border-gray-300 p-2 bg-gray-100">TH</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-gray-300 p-2">TD</td>
      <td class="border border-gray-300 p-2">TD</td>
    </tr>
    <tr>
      <td class="border border-gray-300 p-2">TD</td>
      <td class="border border-gray-300 p-2">TD</td>
    </tr>
  </tbody>
</table>

リスト

リストも表示されません。

- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3

のようなコードを貼り付けても以下のようになるだけです。

これも html を貼り付けると一応表示されます。

このコードは以下のようになっています。

<ul class="list-disc border border-slate-400 inline-block">
    <li class="mx-5">リスト1
        <ul class="list-decimal">
            <li>ネスト リスト1_1
                <ul class="list-none">
                    <li>ネスト リスト1_1_1</li>
                    <li>ネスト リスト1_1_2</li>
                </ul>
            </li>
            <li>ネスト リスト1_2</li>
        </ul>
    </li>
    <li class="mx-5">リスト2</li>
    <li class="mx-5">リスト3</li>
</ul>

これではマークダウンの意味がない？