【個人開発】Markdownで「:::message」を使う方法
1.はじめに
Zennでは:::message
と書くことで、特定の情報を付与したブロックを作ることができます。
これらは「Note記法」と呼ばれ、重要な情報を視覚的に強調するときに大変便利ですが、Markdown独自の仕様ではないため一部のツールで使うことができません。特にVisual Studio Codeで使えないことに不便さを感じていました。
そこで、Zennと同じような:::message
ブロックを作成可能にする「Markdown Info」というVScode拡張機能を作りました。
2.Markdown Info
Markdown Info はVScodeの拡張機能です。
検索窓で「Markdown Info」と入力すると、下記のような拡張機能が見つかると思います。
使用例
使用法は単純です。
ブロックを作りたい箇所で:::message タイプ タイトル
と書き、最後は:::
で閉じるだけです。
タイプは「info」「warn」「alert」「question」を用意しています。
使い方
形式 | Markdown |
---|---|
Zenn形式 | :::message タイプ タイトル |
Qiita形式 | :::note タイプ タイトル |
Zenn形式:
Qiita形式:
解説
VSCode上でZennやQiitaスタイルの「messageボックス」を作成できる拡張機能です。
Zenn形式では以下のように作成します。
:::message タイプ タイトル
内容
:::
Qiita形式でも作成できます。
:::note タイプ タイトル
内容
:::
messageボックスには4種類のタイプがあります。
- info(デフォルト):一般的な情報
- warn:警告
- alert:強い警告
- question:質問や疑問
設定
Default Title
タイトルを省略した場合に反映されるデフォルト値を設定できます。初期状態では「ここにタイトルを記述してください」という値が設定されています。
Preview Styles
Markdownのプレビュー画面に反映されるCSSのスタイルシートを選択できます。利用可能なオプションは以下の通りです:
default: デフォルトのスタイルシートを使用します。
zenn: Zenn風のスタイルシートを適用します。
qiita: Qiita風のスタイルシートを適用します。
3.markdown-it-info
上記の「Markdown Info」は「markdown-it-info」というmarkdown-it-プラグインを使用しています。
ご自身のエディタなどに使用する際はこちらをご利用ください。
npm install markdown-it-info
読み込みはJavascriptで行います。
const
md = require('markdown-it')(),
plugin = require("markdown-it-info");
md.use(plugin,{
admonitionStyle: "default",
defaultType: "info",
defaultTitle: "ここにタイトルを記述してください"
});
- admonitionStyle: CSSスタイルシートを変更するための値。デフォルトは「default」で、他に「zenn」と「qiita」があります。
- defaultType: ボックスのデフォルトタイプを変更するための値。デフォルトは「info」で、他に「warn」、「warning」、「alert」、「question」があります。
- defaultTitle: ボックスのデフォルトタイトルを変更するための値。デフォルトは「ここにタイトルを記述してください」です。
4.GitHub
5.謝辞
このプロジェクトの開発にあたり、以下のオープンソースソフトウェアを参考にさせていただきました。この場を借りて感謝の意を表します。
Discussion