🚀

【個人開発】Markdownで「:::message」を使う方法

2025/01/26に公開

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種類のタイプがあります。

  1. info(デフォルト):一般的な情報
  2. warn:警告
  3. alert:強い警告
  4. question:質問や疑問

設定

Default Title

タイトルを省略した場合に反映されるデフォルト値を設定できます。初期状態では「ここにタイトルを記述してください」という値が設定されています。

Preview Styles

Markdownのプレビュー画面に反映されるCSSのスタイルシートを選択できます。利用可能なオプションは以下の通りです:

default: デフォルトのスタイルシートを使用します。

zenn: Zenn風のスタイルシートを適用します。

qiita: Qiita風のスタイルシートを適用します。

3.markdown-it-info

上記の「Markdown Info」は「markdown-it-info」というmarkdown-it-プラグインを使用しています。

ご自身のエディタなどに使用する際はこちらをご利用ください。

bash
npm install markdown-it-info

読み込みはJavascriptで行います。

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