はじめに

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

見出し

#7個でこれ以上小さくはならないようです。でも6個もあれば十分でしょう。

フォントサイズ

これを弄って試してみます。

<style>
.px {
  color:#00FD00;
  font-weight:bold;
  font-size:10px;
}
</style>
<p class="px">Qiita</p>

1px

緑色のピクセルが小さいですが描画されています。

100px

鮮やかな緑色のQiitaが描画されています。

1000px

とても大きいQが描画されています。ちなみに、他の文字は画面を下にスクロールすると出てきます。

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>

結果

回っていました。まさかマークダウンでやれるとは思っていなかったので、驚いています。

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

対応していませんでした。ちなみに、plantumlも対応していなかったです。

TeX

\begin{equation}
    E = mc^2
\end{equation}

\begin{equation}
    E = mc^2
\end{equation}

対応していませんでした。

まとめ

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

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