VsCodeで快適なマークダウンライフを送るためのTips

masayan
masayan

VsCodeは人気のIDEとして有名ですが、マークダウンファイルの作成・編集用としてもとても高機能で使いやすいです。 本記事では、マークダウン周りの便利な拡張機能や使い方について紹介していますので、ぜひご活用ください。

環境

  • VsCode 1.63.2

プレビュー表示

プレビュー表示のないマークダウンなんて、マークダウンじゃないですよね。

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

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

プレビューをオシャレに

Markdown Preview Github Styling - Visual Studio Marketplace
Extension for Visual Studio Code - Changes VS Code's built-in markdown preview to match Github's style

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

インストールして、再度プレビューを表示すると、GitHub風になります。シャレオツ。

 

Markdown All in One

マークダウンを利用するために欠かせない機能たち

Markdown All in One - Visual Studio Marketplace
Extension for Visual Studio Code - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

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

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

ショートカットキー

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

他にも、Ctrl+Iで文字を斜体にできたり、Alt+Cでチェックリストのオンオフを切り替えたりできるようになります。

見出しのナンバリング

コマンドパレットからMarkdown All in One: Add/Update section numbersを実行すると見出しに自動でナンバリングしてくれます。素敵やん。

箇条書き・番号付きリストの入力支援

箇条書き・番号付きリストの入力が超絶楽になります。リスト入力で改行をすると「-」やインデントが自動で入るなど。

リンク(URL)の入力支援

リンクの入力も手軽にできます。クリップボードにコピーしたリンクを Ctrl + V、または ⌘V で貼り付けるだけで自動でリンク(URL)として表示してくれます。

目次の自動生成

作成した見出しに応じて、目次を自動生成してくれる機能です。 Ctrl + Shift + P でコマンドパレットを出し、create table of contentsと検索し、目次(TOC)の作成をクリックするだけで自動挿入してくれます なお、目次を作成した後に見出しを追加すると、ファイルを保存した時に目次も更新されるようになっています。神・・・

masayan
masayan

また、指定した見出しは目次に入れないということも可能です。手順としては、対象の見出しの上に<!– omit in toc –>というコメントを入れてあげるだけでOKです。

Htmlへの変換

コマンドパレットから、markdown html などで検索し、Print documents to HTMLを実行すると htmlとして出力することが可能。   その他の機能については、マーケットプレイスを直接参照されたし

Markdown All in One - Visual Studio Marketplace
Extension for Visual Studio Code - All you need to write Markdown (keyboard shortcuts, table of contents, auto preview and more)

Markdown PDF

これもVscodeの拡張機能の一つで、マークダウンファイルからPDFやHTMLを出力できます。デフォルトの出力形式はPDFになっているため、HTMLにしたい場合は設定変更が必要です。

Markdown PDF - Visual Studio Marketplace
Extension for Visual Studio Code - Convert Markdown to PDF

pdf, html, png, jpeg形式に対応していますので、必要に応じて追加します。 出力する際は、コマンドパレットからPDF:Export(settings.json)を選択することで出力できます

プレゼン・スライド資料の作成

Marp for VS Codeをインストールすることで、Markdownで記述した文書をスライド化してプレゼン資料を作成することが可能。

Marp for VS Code - Visual Studio Marketplace
Extension for Visual Studio Code - Create slide deck written in Marp Markdown on VS Code

スライド化の必須設定

以下のコメントをmdファイルの最上部に記載する

--- marp: true ---

スライドの区切り

スライドの区切りは以下のどちらかで可能

  • — を使用する
  • headingDividerで区切りとする見出しを指定する(1を指定すると見出し1ごとにスライドが分かれる)
<!-- headingDivider: 1 -->

プレビュー

コマンドパレット(Ctrl + Shift + P)から、Open Preview

PDF出力

コマンドパレットにExport slide deckと入力し、Marp: Export Slide Deckを選択すると、pdf出力可能 すんばらしい。 なお、HTMLでエクスポートすると、  プレゼンテーションモードで表示することも可能。

スタイル変更など

テーマの指定、ヘッダーフッター、背景色、ページ番号の表示、文字色などなどいろいろ指定できる。

---
marp: true
theme: gaia
header: "サンプルプレゼン資料"
footer: "by **masayan**"
paginate: true
backgroundColor: #2F3232
color: #ffffff
---
<!--
headingDivider: 1
-->

なお、アンダースコア(_)をつけると、特定のスライドだけにその設定を適用することも可能です。

<!-- 
_backgroundColor: orange
-->

# 1. プロジェクト概要

その他いろいろと設定があるみたいなので、以下を参照されたし

Marp for VS Code - Visual Studio Marketplace
Extension for Visual Studio Code - Create slide deck written in Marp Markdown on VS Code

画像の貼り付け

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

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

手順

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

Paste Image - Visual Studio Marketplace
Extension for Visual Studio Code - paste image from clipboard directly

画像をコピーして、クリップボードに保持した状態で、コマンドパレットからPaste Imageを選択すると、画像を貼り付け可能です。(ローカルの画像でもweb上の画像でも可能です。)

※また、設定により画像の保存先を変更できます。 設定画面をctrl + ,で開き、Paste Imageと入力し、Pathの項目に画像の保存先を指定する。(以下はmdファイルと同階層にあるimagesディレクトリ内に保存されます

静的解析

markdownlintという拡張機能を使用すると、markdownファイルの静的解析が可能になります。

markdownlint - Visual Studio Marketplace
Extension for Visual Studio Code - Markdown linting and style checking for Visual Studio Code

余計なブランクがあったりすると、黄色の波線が表示されるので、一定程度スタイルを統一することが可能です

文字数カウンター

CharacterCountという拡張機能を使用すると、editorの左下にmdファイルに含まれる文字数をリアルタイムでカウントして表示してくれます

CharacterCount - Visual Studio Marketplace
Extension for Visual Studio Code - 文字数をリアルタイムでカウントする、Visual Studio Codeの機能拡張です。

スニペット

あらかじめ、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学習におすすめの書籍

コメント

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