「markdown AI」って何だ？スポンサー企業テーマで見たやつ

# はじめに

こんにちは、エンジニアのkeitaMaxです。

スポンサー企業テーマでみた「markdown AI」って何だと思って実際に登録して触ってみたので、それを記事にしました！

この記事は「markdown AI」で書いています。

# 登録

https://mdown.ai/

このURLから登録をします。

![スクリーンショット 2024-07-10 20.59.22.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2020.59.22.png)

# 使ってみる

実際に使ってみようと思います。
といっても今「markdown AI」を使用して書いてます笑

したみたいな感じの画面が出てくるので、＋ボタンを押すと新規で記事が書けます。

![スクリーンショット 2024-07-10 21.01.28.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.01.28.png)

どうやら、マークダウンとマークアップの書き方がどっちも使用できるそうです。

# マークダウンで書く

実際にマークダウンで書いてみます。
といってももう書いているので、途中の画面を見せようと思います。

![スクリーンショット 2024-07-10 21.03.26.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.03.26.png)

こんな感じで使用できます。

プレビュー画面を見たい時は、VIEWボタンを押してみれます。


![スクリーンショット 2024-07-10 21.04.45.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.04.45.png)

こんな感じになっています。

![スクリーンショット 2024-07-10 21.04.26.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.04.26.png)

# マークアップで書く
```
<style>
.red{
  color:red;
}
</style>
<p class="red">赤くなる</p>
```

いま上のようにコードを書いてみました。(Qiitaに載せるため、```で囲みました。)
これで試しにプレビューをしてみると以下のようにテキストが赤くなっていました。

![スクリーンショット 2024-07-10 21.08.50.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.08.50.png)

JSとかも使えるのかやってみます。

```

<p>テスト</p>
<button onclick="alert("テスト")">アラートが出る</button>

```

こんな感じで書いてみました。(Qiitaに載せるため、```で囲みました。)


![スクリーンショット 2024-07-10 21.13.23.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.13.23.png)

ボタンは出てきますが、さすがにjsは動かないですね笑

# 画像について

画像も`Image`っていうところを押せば追加することができます。


![スクリーンショット 2024-07-10 21.16.18.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.16.18.png)


![スクリーンショット 2024-07-10 21.16.24.png](https://storage.googleapis.com/topdowncom/content/nhtovtbBPrh6Y8QiiMWSFoiiEPl2/e6540eab-f792-4312-a806-e2df4d503d4a/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-07-10%2021.16.24.png)


# おわりに

マークダウンとマークアップ形式を同じところにかけるのは面白かったです。

今後追加機能もあるらしいので楽しみです。

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

# 参考

https://qiita.com/tanaka_yaruo/items/9a8e7542f0c527499ed2