markdown AIの仕様を探ってみる

## はじめに
この記事は、真面目な内容ではないことを最初に言っておきます。ただ、ちょっとだけ気になったので、いろいろ試してみました。

## 見出し
#7個でこれ以上小さくはならないようです。でも6個もあれば十分でしょう。
![Screenshot 2024-06-11 at 17-09-22 MarkdownAIβ.png](https://storage.googleapis.com/topdowncom/content/j5tgVxlSAAZS1SnSpnY6KMheixi2/f63d137d-8b18-4467-8add-320f025bc199/Screenshot%202024-06-11%20at%2017-09-22%20MarkdownAI%CE%B2.png)

## フォントサイズ
これを弄って試してみます。
```
<style>
.px {
  color:#00FD00;
  font-weight:bold;
  font-size:10px;
}
</style>
<p class="px">Qiita</p>
```
### 1px
緑色のピクセルが小さいですが描画されています。
![Screenshot 2024-06-11 at 17-14-23 MarkdownAIβ.png](https://storage.googleapis.com/topdowncom/content/j5tgVxlSAAZS1SnSpnY6KMheixi2/f63d137d-8b18-4467-8add-320f025bc199/Screenshot%202024-06-11%20at%2017-14-23%20MarkdownAI%CE%B2.png)

### 100px
鮮やかな緑色のQiitaが描画されています。
![Screenshot 2024-06-11 at 17-19-03 MarkdownAIβ.png](https://storage.googleapis.com/topdowncom/content/j5tgVxlSAAZS1SnSpnY6KMheixi2/f63d137d-8b18-4467-8add-320f025bc199/Screenshot%202024-06-11%20at%2017-19-03%20MarkdownAI%CE%B2.png)

### 1000px
とても大きいQが描画されています。ちなみに、他の文字は画面を下にスクロールすると出てきます。
![Screenshot 2024-06-11 at 17-21-01 MarkdownAIβ.png](https://storage.googleapis.com/topdowncom/content/j5tgVxlSAAZS1SnSpnY6KMheixi2/f63d137d-8b18-4467-8add-320f025bc199/Screenshot%202024-06-11%20at%2017-21-01%20MarkdownAI%CE%B2.png)

### 10000px
画像が大きすぎるので割愛しますが、文字がちゃんと描画されていました。おそらくmarkdown AI側の限界はないんじゃないでしょうか？

## HTML
どうやらHTMLタグが使えるらしいです。ローディングスピナーを回転させるやつで試してみます。
```
<style>
	.spinner {
		border: 16px solid #f3f3f3; /* Light grey */
		border-top: 16px solid #3498db; /* Blue */
		border-radius: 50%;
		width: 120px;
		height: 120px;
		animation: spin 2s linear infinite;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}
</style>
<div class="spinner"></div>
```
### 結果
回っていました。まさかマークダウンでやれるとは思っていなかったので、驚いています。
![Screenshot 2024-06-11 at 17-32-55 MarkdownAIβ.png](https://storage.googleapis.com/topdowncom/content/j5tgVxlSAAZS1SnSpnY6KMheixi2/f63d137d-8b18-4467-8add-320f025bc199/Screenshot%202024-06-11%20at%2017-32-55%20MarkdownAI%CE%B2.png)

## mermaid記法
```mermaid
graph LR
    A[Start] --> B{Is it sunny?}
    B -->|Yes| C[Go for a walk]
    B -->|No| D[Stay indoors]
    C --> E[End]
    D --> E
```
```
graph LR
    A[Start] --> B{Is it sunny?}
    B -->|Yes| C[Go for a walk]
    B -->|No| D[Stay indoors]
    C --> E[End]
    D --> E
```
対応していませんでした。ちなみに、plantumlも対応していなかったです。
![Screenshot 2024-06-11 at 17-46-58 MarkdownAIβ.png](https://storage.googleapis.com/topdowncom/content/j5tgVxlSAAZS1SnSpnY6KMheixi2/f63d137d-8b18-4467-8add-320f025bc199/Screenshot%202024-06-11%20at%2017-46-58%20MarkdownAI%CE%B2.png)

## TeX
```math
\begin{equation}
    E = mc^2
\end{equation}
```
```
\begin{equation}
    E = mc^2
\end{equation}
```
対応していませんでした。
![Screenshot 2024-06-11 at 17-53-48 MarkdownAIβ.png](https://storage.googleapis.com/topdowncom/content/j5tgVxlSAAZS1SnSpnY6KMheixi2/f63d137d-8b18-4467-8add-320f025bc199/Screenshot%202024-06-11%20at%2017-53-48%20MarkdownAI%CE%B2.png)

## まとめ
少し無茶振りはしたものの、基本的なmarkdown記法はちゃんと使えて良かったと思います。
個人的な要望としては、プレビューがボタンを介して行き来しなければ見ることができない点が使いづらかったので、qiitaやvscodeのように分割画面でプレビューができれば良いと思いました。
また、箇条書きでネストするときに、スペースを2個入れないと使えない点、ネスト時に改行をするとカーソルが左端に行く点が使いづらいと感じたので、このあたりが良くなったら良いなと思いました。

ここにAIが加わったらいい感じにしてくれるのでしょうか？楽しみです。

https://mdown.ai/content?id=335b81b2-bcb0-4dbb-83d0-531aa132181f