Markdown Hako

便利なMarkdown用プラグインを一括導入できるVSCode拡張機能です。この拡張機能をインストールするだけで、Markdownの編集や表示に役立つ様々な機能を利用できるようになります。
目次
インストール
VScodeのマーケットプレイスで「Markdown Hako」と入力してください。
プラグイン
「Markdown Hako」をインストールすることで、下記のプラグインが使用可能となります。各プラグインは設定でON/OFFの切り替えのほか、独自のコンフィグを設定することも可能です。
markdown-it-table-of-contents
[[toc]]
と書いた箇所に、自動生成された目次をレンダリングするプラグインです。

: markdown-it-table-of-contents
テキスト[^1]
及び[^1]: 脚注
とセットで書くと、文章下部に脚注が出現します。

: markdown-it-footnote
markdown-it-sup
supは「Superscript(上付き文字)」の略です。x^2^
のように^
で囲むと、x<sup>2</sup>
のように<sup>
タグで囲まれてレンダリングされます。

: markdown-it-sup
markdown-it-sub
subは「Subscript(下付き文字)」の略です。H~2~O
のように~
で囲むとH<sub>2</sub>O
のように<sub>
タグで囲われてレンダリングされます。

: markdown-it-sub
markdown-it-attrs
# タイトル{#カスタムID}
とすると、レビューから{#カスタムID}
部分は削除されます。また、<h1 id="カスタムID">タイトル</h1>
のようにIDが付与されてレンダリングされます。

: markdown-it-attrs
markdown-it-kbd
kbdは「keyboard(キーボード)」の略です。[[ctrl]]+[[shift]]+[[c]]
のように各文字を[[]]
で囲むと、<kbd>ctrl</kbd>+<kbd>shift</kbd>+<kbd>c</kbd>
のように<kbd>
で囲われてレンダリングされます。

: markdown-it-kbd
markdown-it-underline
_文字_
とすることで<u>underline</u>
でレンダリングできるプラグインです。<u>
は以前は単なる下線を引くタグでしたが、HTML5で役割が変更されました。主に誤字を指摘する用途に使います。
ちなみにこのプラグインを導入しない場合、_文字_
は<em>文字</em>
でレンダリングされます。<em>
は「強調(emphasis)」を表現するためのタグです。

: markdown-it-underline
markdown-it-mark
==文字==
とすることで<mark>文字</mark>
でレンダリングされるプラグインです。<mark>
は検索結果を表示する際など、文脈上重要な箇所を強調するために使うタグです。

: markdown-it-mark
markdown-it-mojicolor
%文字%{黄色}
とすることで、<span style="color: #ffd900;">文字</span>
のように指定した色がレンダリングされるプラグインです。

: markdown-it-mojicolor
設定オプション
markdown-hakoには2つの設定があります。
1. プラグインのON/OFF機能
Markdown-hako > Markdown-it-〇〇: Enable
(デフォルト: true)
- true(チェック) : プラグインが有効となり、Markdownプレビューに反映されます
- false(チェックを外す) : プラグインは無効になり、Markdownプレビューに反映されなくなります
2. プラグインのオプション設定機能
Markdown-hako > Markdown-it-〇〇: Options
(デフォルト: 各プラグインで異なります)
- settings.json で編集 : 各プラグインの詳細設定を編集できます
各プラグインを独自の設定にしたい場合はsettings.json で編集
をクリックします。
クレジット
VScode拡張機能で表示されるアイコンは、以下の2つの画像を組み合わせたものです。
謝辞
このプロジェクトの開発にあたり、以下のオープンソースソフトウェアを参考にさせていただきました。この場を借りて感謝の意を表します。