1．はじめに

Qiitaでは、:::noteと書くことで特定の情報を付与したブロックを作ることができます。

テキスト

これらは「Note記法」と呼ばれ、重要な情報を視覚的に強調するときに大変便利ですが、Markdown独自の仕様ではないため一部のツールで使うことができません。特に Visual Studio Code で使えないことに不便さを感じていました。

そこで、Qiitaと同じような:::noteブロックを作成可能にする「Markdown Info」というVScode拡張機能を作りました。

2．Markdown Info

Markdown Info はVScodeの拡張機能です。
検索窓で「Markdown Info」と入力すると、下記のような拡張機能が見つかると思います。

使用例

使用法は単純です。ブロックを作りたい箇所で:::note タイプタイトルと書き始め:::で閉じるだけです。
タイプは「info」「warn」「alert」「question」を用意しています。

使い方

形式	Markdown
Qiita形式	`:::note タイプタイトル`
Zenn形式	`:::message タイプタイトル`

Qiita形式:

Zenn形式:

解説

VSCode上でQiitaやZenn形式の「Infoボックス」を作成できる拡張機能です。

Qiita形式では以下のように作成します。

:::note タイプ タイトル
内容
:::

Zenn形式でも作成できます。

:::message タイプ タイトル
内容
:::

Infoボックスには4種類のタイプがあります。

info（デフォルト）：一般的な情報
warn：警告
alert：強い警告
question：質問や疑問

設定

Default Title

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

Preview Styles

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

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

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

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

3．markdown-it-info

上記の「Markdown Info」は「markdown-it-info」というmarkdown-it-pluginを使用しています。

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

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」で、他に「qiita」と「zenn」があります
defaultType: ボックスのデフォルトタイプを変更するための値。デフォルトは「info」で、他に「warn」、「warning」、「alert」、「question」があります
defaultTitle: ボックスのデフォルトタイトルを変更するための値。デフォルトは「ここにタイトルを記述してください」です

4．GitHub

5．謝辞

このプロジェクトの開発にあたり、以下のオープンソースソフトウェアを参考にさせていただきました。この場を借りて感謝の意を表します。

qjebbs/vscode-markdown-extended