Markdownの中で独自記法でメッセージブロックを書けるようにしたい

[machida]

メッセージブロック

Markdownのエディタの中で、

:::message
メッセージ
:::

このように書くと、

<div class="msg">
<p>メッセージ</p>
</div>

このような HTML が出力されるようにしたい。

---

メッセージブロックのバリエーション

このバリエーションで、

:::message alert
警告メッセージ
:::

このように書くと、

<div class="msg alert">
<p>警告メッセージ</p>
</div>

と出力されるようにしたい。

---

メッセージブロックのバリエーション2

:::message info
メッセージ
:::

このように書くと、

<div class="msg info">
    <p>メッセージ</p>
</div>

と出力されるようにしたい。

---

ポイント

メッセージブロックの中はMarkdown記法が使えるようにする。

:::message
### 見出し

ああああああああああああああ

- あああああ
- あああああ
:::

<div class="msg">
<h3>見出し</h3>
<p>ああああああああああああああ</p>
<ul>
<li>あああああ</li>
<li>あああああ</li>
</ul>
</div>

---

仕様のまとめ

• :::文字列 と ::: があると、<div class="文字列"> 、</div> で囲われる。
• :::文字列 と ::: の間には Markdown 記法が使える。
• :::文字列 文字列 とあった場合は、div に複数 class が付く。<div class="文字列 文字列">

[eatplaynap]

@machida
お疲れさまです。こちらの仕様について確認したい件が1点あるので、下記ご回答お願いいたします:pray:

:::文字列 と ::: があると、<div class="文字列"> 、</div> で囲われる。

と仕様のまとめにはありますが、具体例の方ではmessage→msgへの変換も含まれているようです。

:::文字列の文字列をそのままclass属性に渡すのではなく、この変換にも対応する必要があるのかご教示ください:pray:

[machida]

@eatplaynap
こちら、フィヨルドブートキャンプでは、

:::文字列 の文字列がそのまま class名になる、
という仕様で願いします🙏

（message → msg の変換は無し）

[eatplaynap]

@machida
本日の開発ミーティングでこちらのIssueの仕様変更を承諾いただいた件について、下記で認識があっているかどうかご確認お願いします🙏

変更前: :::文字列 と ::: があると、<div class="文字列"> 、</div> で囲われる
変更後: :::message と ::: があると、<div class="message"> 、</div> で囲われる

[eatplaynap]

町田さんからDiscordで下記返答をいただいたので↑については確認済みです。

はい！それで合ってますー🙆‍♂️
divのclass名は決め打ちでお願いします。今後、warningやinfoなどを追加していく予定です。

https://discord.com/channels/715806612824260640/809595476847493192/953572167046529095

[eatplaynap]

@machida
クラス名をmessageのみの決め打ちで実装したところ、レビュワーの@garammasala29さんがmessageのあとに自由に文字列を入力できる方法をご教示くださったため、そのように修正しました！
参考: #4424 (comment)

この変更により、下記のようにクラス名を指定することが可能になりました。

• :::messageと::: → <div class="message"> と</div>
• :::message warningと::: → <div class="message warning"> と</div>
• :::message hogeと::: → <div class="message hoge"> と</div>
• :::message hoge fuga piyoと::: → <div class="message hoge fuga piyo"> と</div>

※message以外で始まるクラス名は指定できません。別の名前で始まるクラスを作りたい場合は、また別途markdown-it-containerを使用した別のコンテナを作る必要があります😄

[eatplaynap]

本番環境で動作確認できたのでcloseします〜！