マークダウンを編集する方法 (Markdown) [VSCode]

マークダウン

公式サイト：

Markdown Editing | Visual Studio Code [Official]

導入

参考：

Visual Studio Code で Markdown を書く環境を整える – Qiita

Visual Studio Code で Markdown 編集環境を整える – Qiita

チートシート付き VSCode で始める Markdown | 株式会社ウィズテクノロジー

Visual Studio Code を Markdown エディターとして使用する | Webrandum

VSCode で超快適な Markdown エディタ環境を作る | SyachikuLOG

VSCode を利用した Markdown の基礎とフォーマット構文 | tracpath Works

Markdown の導入と基本的な使用方法 | b1san’s blog

使い方

参考：

VSCode でちょっとでも Markdown する – Qiita

ショートカットキー

操作

Ctrl + Shift + V：プレビューを表示する

Ctrl + K → V：プレビューを並べて表示する

参考：

Visual Studio Code で Markdown を書くときに覚えておきたいたった2つのショートカット – Qiita

VSCode で Markdown をプレビューするには？ | ＠IT

マークダウン記法

こちらのページを参照

マークダウン記法の書き方

参考：

Visual Studio Code で使える Markdown 記法のまとめ | Miraium

画像を挿入する

参考：

Visual Studio Code が Markdown のサポートを強化／ファイルのドロップでリンクを自動作成、見出しへの参照一覧など (v1.67 / April 2022) | Publickey

Drop into Editor to Create Link | Visual Studio Code [Official]

リンクを張る

[テキスト](URL) の形式でリンクを張る。

[Example](https://example.com)Code language: Markdown (markdown)

リンク対象

URL (http:// または https://)
他のマークダウンへのリンク (./read_more.md)
ページ内リンク (#見出し)
フォルダーへのリンク (./path/to/folder)

拡張機能

Relative Path

相対パスを補完したい場合、「Relative Path」をインストールする。

参考：

file path complete in VSCode – Stack Overflow

What is “fragment link navigation for Markdown” in Visual Studio Code? – Stack Overflow

プレビュー

Markdown Preview Enhanced

参考：

リアルタイムプレビュー | アシタカブログ

目次を自動生成する

手順

「Markdown All in One」をインストールする。
対象のマークダウンファイルを信頼済みフォルダーに追加する。
目次を挿入する箇所にカーソルを移動し、Ctrl + Shift + P キーを押してコマンドパレットを開いて、「Markdown All in One: 目次の作成」 (Create Table of Contents / TOC) を実行する。

参考：

Markdown における目次 (TOC) の作成に、Markdown All in One が便利だった件 – Qiita

Markdown All in One で Markdown の目次を自動生成など作業効率化 | 西住工房

Visual Studio Code の Auto Markdown TOC プラグインという目次作成ツールが神な件 – Qiita

Markdown to create pages and table of contents? – Stack Overflow

自動整形する

Prettier

参考：

VSCode で Markdown の自動フォーマット & 整形ルールを自由に設定 – Qiita

Prettier で Markdown をフォーマットしたときの英語と日本語の間に入るスペースをどうにかする – Qiita

HTML に変換する

「Markdown PDF」を使う

参考：

VSCode で Markdown を書いたら HTML へ自動変換する – Qiita

VSCode で Markdown を HTML や PDF に変換するには？ | ＠IT

リンクを開く方法を変更する

参考：

follow link (ctrl+click) open it in editor instead of open it in browser – Stack Overflow

目次のリンクが機能しない

参考：

markdown-it の markdown-it-named-headers plugin で custom slugify を設定する – Qiita

Markdown で作った HTML ファイルのページ内リンク／アンカーが IE で使えない – teratail

markdown-it-named-header custom slugify for non-latin characters by satokaz · Pull Request #20628 · microsoft/vscode – GitHub

Wrong VS Code slugify: Should parse heading by the same markdown-it engine as VS Code’s · Issue #970 · yzhang-gh/vscode-markdown – GitHub

Header anchors [needs discussion] · Issue #28 · markdown-it/markdown-it – GitHub

Some characters in the address linked from TOC are deleted and the link cannot be made. · Issue #705 · yzhang-gh/vscode-markdown – GitHub

Lower case links in TOC don’t work · Issue #312 · yzhang-gh/vscode-markdown – GitHub

動画を埋め込みたい

代替手段

アニメーション GIF として埋め込む。
サムネイル画像を表示して、動画へのリンクを張る。

対処法：

GIF 画像に動画へのリンクを張る。

[![世界ねこ散歩 サルデーニャ島編](thumbnail.gif)](https://www.youtube.com/watch?v=OqY9Frh3t3I)Code language: Markdown (markdown)

拡張機能

ローカルの動画を VSCode でプレビューしたい場合は、「MPEG-4 Preview」をインストールする。

※ v1.71 以降、VSCode 本体に FFmpeg のコーデックが同梱されるようになり、標準で動画を再生できるようになった。

参考：

Rename image-preview extension to media-preview by mjbvz · Pull Request #162093 · microsoft/vscode – GitHub

Support video in markdown preview · Issue #40507 · microsoft/vscode – GitHub

HTML video tag · Issue #514 · yzhang-gh/vscode-markdown – GitHub

Insert video in README.md for an extension of VSCode – Stack Overflow

Insert embeded YouTube video in Markdown – Stack Overflow

Show HTML5 video on previewHtml command in vscode extension – Stack Overflow

ローカルファイルへリンクを張りたい

セキュリティ上の理由で、ローカルファイルへのリンクはブラウザや外部プログラムで開けないようになっている。

NG 例

[リンク](file:///C:/path/to/local_file.exe)

OK 例

[詳細](./detail.md)

参考：

How to open markdown PDF links with external PDF viewer · Issue #78742 · microsoft/vscode – GitHub

How link to any local file with markdown syntax? – Stack Overflow

follow link (ctrl+click) open it in editor instead of open it in browser – Stack Overflow

How to make local file link open default program – Stack Overflow

多重リストが正常にプレビューされない

参考：

Markdown preview incorrectly renders nested lists · Issue #8146 · microsoft/vscode – GitHub

Markdown files indents list items with 3 spaces instead of a tab – Stack Overflow

How to make nested markdown bullet lists have different bullet styles in VSCode – Stack Overflow

align markdown lists in editor – Stack Overflow

機能を拡張する

ドキュメント：

Markdown Extension | Visual Studio Code Extension API [Official]

拡張機能

参考：

Visual Studio Code で Markdown を書くときに便利な組み合わせ見つけたから晒す – Qiita

まとめ／Tips

Visual Studio Code で Markdown を書く際に入れておきたい便利な拡張機能 5選 – Qiita

Visual Studio Code の Markdown 拡張便利機能まとめ – Qiita

VSCode でマークダウンファイルを快適に使用する Tips | masayanblog

VSCode で Markdown を書くときに便利な拡張機能 | MoreBeerMorePower

Auto Markdown TOC

入手：

Auto Markdown TOC | Visual Studio Marketplace [Official]

リポジトリ：

huntertran/markdown-toc: Auto MarkdownTOC (Table Of Contents) plugin for Visual Studio Code – GitHub

参考：

Visual Studio Code の Auto Markdown TOC プラグインという目次作成ツールが神な件 – Qiita

Auto Open Markdown Preview

入手：

Auto Open Markdown Preview | Visual Studio Marketplace [Official]

リポジトリ：

hnw/vscode-auto-open-markdown-preview: VSCode Extension for Opening Markdown Preview Automatically when Opening a Markdown File – GitHub

参考：

勝手に Markdown プレビューを開く VSCode のエクステンションを書いた | hnw の日記

Auto Open Markdown Preview – VSCode で Markdown を扱うなら必須の拡張機能 | 窓の杜

Auto Open Markdown Preview Enhanced

入手：

Auto Open Markdown Preview Enhanced | Visual Studio Marketplace [Official]

リポジトリ：

timgreen/vscode-auto-open-markdown-preview-enhanced: VSCode Extension for Opening Markdown Preview Automatically when Opening a Markdown File – GitHub

Markdown All in One

操作

Ctrl + B：太字を切り替える

Ctrl + I：斜体を切り替える

Ctrl + Shift + [：見出しを大きくする

Ctrl + Shift + ]：見出しを小さくする

入手：

Markdown All in One | Visual Studio Marketplace [Official]

リポジトリ：

yzhang-gh/vscode-markdown: Markdown All in One – GitHub

参考：

Markdown All in One を使って VSCode での Markdown の編集を効率化する | MR が楽しい

Markdown All in One – VSCode で Markdown を書くために便利な拡張機能 | いつも隣に IT のお仕事

Markdown All in One | Ctrl キーは小指の付け根

Visual Studio Code で Markdown All in One 機能拡張のインデントを4スペースに変更する | DevelopersIO

Markdown Converter

入手：

Markdown Converter | Visual Studio Marketplace [Official]

リポジトリ：

manuth/MarkdownConverter: Provides the Functionallity to Convert Markdown Files to HTML, PNG, or PDF – GitHub

Markdown Links

入手：

Markdown Links | Visual Studio Marketplace [Official]

リポジトリ：

tchayen/markdown-links: Command that Displays a Graph of Local Links between Markdown Files – GitHub

Markdown Link Suggestions

入手：

Markdown Link Suggestions | Visual Studio Marketplace [Official]

リポジトリ：

TomasHubelbauer/vscode-markdown-link-suggestions: Suggests Workspace Files and Markdown File Headers in Markdown Links – GitHub

参考：

What would it take to enable Markdown link local file path suggestions? · Issue #48194 · microsoft/vscode – GitHub

Markdown Lint

インラインでルールを無効化する。

<!-- markdownlint-disable MD033 -->

インラインでルールを有効化する。

<!-- markdownlint-enable MD033 -->

プロジェクト毎にルールを設定するには、プロジェクト内の .vscode/settings.json ファイルに markdownlint.config の項目を追加する。

{
    // ...
    "markdownlint.config": {
        "MD012": false,
        "MD024": false,
        "MD029": false,
        "MD033": false
    },
    // ...
}Code language: JSON / JSON with Comments (json)