VsCodeでマークダウンファイル(.md)を快適に使用するTips

環境

  • VsCode 1.63.2

プレビュー表示

マークダウンファイルを書いている途中に、プレビュー表示したいですよね。

VsCodeだと、Ctrl + Shift + P を実行してコマンド一覧にMarkdown:プレビューを横に表示という項目があるので、クリックします

そうすると、画面右側にプレビュー表示されます。いい感じですね。

MarkdownのプレビューをGitHub風にする

マーケットプレースでVS Codeの拡張機能「Markdown Preview Github Styling」を導入します。
Markdown Preview Github Stylingと検索し、インストールをクリックします。

インストールすると、プレビュー画面がGitHub風になります。おお~すごい。

Markdown All in One

マーケットプレースで拡張機能からMarkdown All in Oneをインストールします。

主に以下の機能が使用できるようになります。

1.ショートカットキー

文字を強調表示したいときには、その範囲を「**」で囲むひつようがありますが、Markdown All in Oneをインストール後は、対象のテキスト範囲を選択して、Windowsなら Ctrl + B 、Macなら ⌘B で実行することができます。

2.見出しのナンバリング

コマンドパレットからMarkdown All in One: Add/Update section numbersを実行する

見出しに自動でナンバリングしてくれます。素敵。

3.リスト・リンクの入力支援

リスト入力で改行をすると「-」やインデントが自動で入るなど、連続入力が楽になります。

また、リンクの入力も手軽にできます。クリップボードにコピーしたリンクを

先にURL(例えば「https://maasaablog.com/」)をクリップボードにコピーしておき、キーワードを選 Ctrl + V、または ⌘V で貼り付けると自動でリンクとして生成してくれます。

Markdown PDF

これもVscodeの拡張機能の一つで、マークダウンファイルからPDFやHTMLを出力できます。

デフォルトの出力形式はPDFになっているため、HTMLにしたい場合は設定変更が必要です。

pdf, html, png, jpeg形式に対応していますので、必要に応じて追加します。

出力する際は、コマンドパレットからPDF:Export(settings.json)を選択することで出力できます

Inser Date String

この拡張を使用すると、[ctrl]+[shift]+[i]で日付をカーソル位置に挿入することができます。

日付のフォーマットを変更したい場合は、ユーザー設定タブを開いて、YYYY-MM-DD hh:mm:ss を YYYY-MM-DD等に変更します

Paste Image

Markdownに画像を挿入する場合、デフォルトでは以下のような手順が必要ですが、
この拡張機能を入れるとコピーペーストで画像を貼り付けることが可能です。

  1. フォルダに画像を格納する
  2. Markdownの画像挿入の記述をする ※![代替テキスト](フォルダパス

マーケットプレースでPaste Imageと検索し、インストールをクリック。

VS CodeのMarkdownの挿入したい位置にカーソルを置いた状態で、ショートカットキー Ctrl + Alt + V または ⌥⌘V を実行すると画像が所定のフォルダに保存され、マークダウンファイルに貼り付けされます。

※設定により画像の保存先を変更できます。 Ctrl + , または ⌘, でSettingsを開き、検索窓で「paste image」などで検索し、「Paste Image: Path」の設定項目に以下のように入力します。

${currentFileDir}/img

そうすると、画像が、mdファイルが存在するディレクトリにあるimgフォルダの中に保存されるようになります。

CharacterCount

おまけ程度ではありますが、拡張機能CharacterCountを使用すると、editorの左下にmdファイルに含まれる文字数をカウントして表示してくれます。

スニペット

あらかじめ、mdファイルの用途に応じてテンプレートを作成できる機能です。

イメージ

あらかじめ登録しておいたキーワードを入力すると、そのキーワードに対応するmdのテンプレートが挿入されます。

設定手順

VsCodeでmarkdownのスニペットを有効にする

ファイル → 基本設定 → 設定 → 拡張機能 → settings.json で編集 を選択し、以下を追記

 "[markdown]": {
    "editor.wordWrap": "on",
    "editor.quickSuggestions": true,
    "editor.snippetSuggestions": "top"
 },

マークダウン用のスニペット設定を作成する

ファイル → 基本設定 → ユーザースニペット → Markdown.json を選択。

markdown.jsonを選択

標準的なスニペットの登録方法

"スニペット名": { 
  "prefix": "キーになる文字列", 
  "body":[ "呼び出される文字列" ], 
  "description": "このスニペットの説明文" }
  • スニペット名
    重複しなければ自由に付けて大丈夫です。
  • キーになる文字列
    この文字列を入力(途中でも)することでスニペットが起動します。
  • 呼び出される文字列
    上記、キーになる文字列をこちらの文字列で置き換えます。
  • このスニペットの説明文
    スニペットの候補とともにこの説明文が表示されるので、分かりやすいコメントを書いておきましょう。

設定例

設定例として、打合せ議事録、Todoリスト、メモ用のスニペットを記載しておきますので参考にしてみてください。

markdown.json

{
    "meeting": {
        "prefix": "m",
        "body": [
            "# <会議体名>",
            "## 日時",
            "## 場所",
            "## 出席者",
            "-",
            "## 議題",
            "1. [議題1](#link)",
            "2.",
            "3.",
            "## 議事内容",
            "### 議題1",
            "## 決定事項",
            "- 決定事項1",
            "## アクション事項",
            "- [ ] アクション",
            "## 次回",
            "yyyy/mm/dd (予定、時間は追って連絡)",
        ],
        "description": "打合せ議事録"
    },
    "todo": {
        "prefix": "m",
        "body": [
            "# Todo",
            "## AM",
            "- ",
            "  - ",
            "- ",
            "  - ",
            "- ",
            "  - ",
            "- ",
            "## PM",
            "- ",
            "  - ",
            "- ",
            "  - ",
            "- ",
            "  - ",
            "- ",
        ],
        "description": "Todo",
    },
    "memo": {
        "prefix": "m",
        "body": [
            "# Memo",
            "## Title",
            "- 1 ",
            "  - 1-1 ",
            "- 2 ",
            "  - 2-1 ",
        ],
        "description": "メモ",
    },
}

VSCode学習におすすめの書籍

本記事では、VsCodeでマークダウンファイル(.md)を快適に使用するためのいくつかのTipsを紹介しています。

コメント

タイトルとURLをコピーしました