GravプラグインであるMarkdown Noticesの機能によりマークダウンから簡単にBootstrapのコンポーネントであるAlertを呼び出す方法を紹介します。やり方は普通にBootstrap CSSが読み込まれている環境でプラグインの設定を次のようにするだけです。YAMLで表示していますがAdminからも簡単に変更できます。
Markdown Noticesプラグインの設定
enabled: true
built_in_css: false
base_classes: 'alert'
level_classes: [alert-info, alert-warning, alert-danger, alert-success]ビルトインCSSのクラスは使われないのでfalse、他はBootstrapのコンポーネントが呼び出せるように合わせます。
マークダウンの書き方
! A simple info alert—check it out!
!! A simple warning alert—check it out!
!!! A simple danger alert—check it out!
!!!! A simple success alert—check it out!のようなマークダウンテキストを入力します。この結果は以下のようになります。
A simple info alert—check it out!
A simple warning alert—check it out!
A simple danger alert—check it out!
A simple success alert—check it out!
（更新）投稿時に本サイトのCSSフレームワークはBootstrapでしたが現在は違います。Bootstrapの場合見た目はこれとは違ったものになります。
簡単です。もちろんprimaryやsecondaryなどのアラートを使うこともできまし、順番を変えることもできます。次のようにエクスクラメーションを続ければ複数行もいけますし、もともとのマークダウン記法も使えます。
! ### This is h3 headings.
!
! In this block, markdown expression can be used in the same way.
! * I have a pen.
! * I have an apple.
!
! ---
!
! Aww yeah, you successfully read this important alert message.これをレンダリングすると次のようになります。
This is h4 headings.
In this block, markdown expression can be used in the same way.
- I have a pen.
- I have an apple.
Aww yeah, you successfully read this important alert message.
（更新）投稿時に本サイトのCSSフレームワークはBootstrapでしたが現在は違います。Bootstrapの場合見た目はこれとは違ったものになります。
ブロック内はあくまで普通のマークダウンになるということですね。この辺りはMarkdown Noticesの普通の使いかたですので簡単ですね。余りにもビックリマークが多いと使いにくいので実用上使えるアラートは4種類までといったところでしょうか。
alert-linkにマークダウンから対応
アラート内にリンクを貼るときにアンカータグのクラスでalert-linkを指定すると配色がいい感じになります。Markdown ExtraをGravの設定でオンにしてあれば次のようにしてalert-linkを指定することができます。
!! #### This is h4 headings
!!
!! This is [an example link](#){.alert-link}.
!! Using Markdown Extra functionality.This is h4 headings
This is an example link Using Markdown Extra functionality.
（更新）投稿時に本サイトのCSSフレームワークはBootstrapでしたが現在は違います。Bootstrapの場合見た目はこれとは違ったものになります。
Markdown Extraがオフの場合でも直接リンクを記入すれば同じことが出来ます。ただ、これを多用してしまうとマークダウンというよりただのHTMLファイルになるので多用する場合は諦めてExtraをオンにするほうが良いでしょう。
!!! #### This is h4 headings
!!!
!!! This is <a href="#" class="alert-link">an example link</a>
!!! Not using Markdown Extra functionality.This is h4 headings
This is an example link Not using Markdown Extra functionality.
（更新）投稿時に本サイトのCSSフレームワークはBootstrapでしたが現在は違います。Bootstrapの場合見た目はこれとは違ったものになります。
AlertとNoticeの違いとは
ほとんど同じだと思います（急ぎ具合が異なるのか？）。なのでGravのMarkdown Noticesプラグインを使っていてかつBootstrapにより構築されているテーマならばスタイルの重複なんかが発生するのでこのようにするのがよいでしょう。ちなみにビルトインCSS使ったデフォの見た目はだいたいこんな感じになります（テキストの色は当てていません）。
This is h3 headings
In this block, markdown expression can be used in the same way.
- I have a pen.
- I have an apple.
Aww yeah, you successfully read this important alert message.
こちらはGravのデフォルトなのでGravを使用したことのある人なら人目でそれとわかりますが、BootstrapのAlertほどではないでしょう。
Markdown NoticesのビルトインCSSだとNotices内の全ての要素のスタイルをカバーできているわけではない(例えばalert-linkなど)ので、Bootstrapを使っていて個別にスタイルをあてるといった作業をやりたくない場合はBootstrapのAlertを採用してBootstrap全体を統一的にカスタマイズするのが良いかなと個人的に思います。