15
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

esaで:::infoを使う方法

Last updated at Posted at 2023-06-03

この記事は古いです。

2024/3/4に、GitHubで対応していたアラート構文がEsaにも対応されていました。
今までHTMLで書いていたので、改行がされにくいなど少々大変なこともありましたが、Markdownの記法として便利になりました!!
ぜひ、公式リファレンスをご確認を。

初めに

HackMDやQiitaでは注意して欲しい部分や、ちょっとした情報を乗っけるために:::を用いた枠の作成がありました。
ですがesaの公式リファレンスでは書き方が書いていなく困っていたところ、調べたらやり方があったので、メモがわりに残しておきたいと思います。

esaでの実際の表示

スクリーンショット 2023-06-04 2.07.38.png

コード

<div class="alert alert-success">
<i class="fa fa-info-circle"></i> <b>タイトル</b><br>
内容
</div>
<div class="alert alert-danger">
<i class="fa fa-info-circle"></i> <b>タイトル</b><br>
内容
</div>

Qiitaで表示をさせると

タイトル
内容

タイトル
内容

Qiitaでの書き方

:::note
**タイトル**
内容
:::
:::note warn
**タイトル**
内容
:::

感想

結局HTMLを用いて書く感じになっていましたね。
alertというcssが用意されているのなら、あらかじめ:::で設定できるようになるといいなぁと思っています。

15
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?