0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2025-01-25

1.はじめに

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

テキスト

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

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

2.Markdown Info

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

setup.png

使用例

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

markdown-info-jp.png

使い方

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

Qiita形式:

qiita-snippet-jp.gif

Zenn形式:

zenn-snippet-jp.gif

解説

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

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

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

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

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

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

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

type.png

設定

Default Title

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

default-title-jp.png

Preview Styles

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

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

default-style-jp.png

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

qiita-style-jp.png

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

zenn-style-jp.png

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.謝辞

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

0
0
2

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?