VSCode

VSCodeでMarkdownを活用する方法|おすすめ拡張機能もご紹介

軽量マークアップ言語:Markdown

VSCode(Visual Studio Code)では、軽量なマークアップ言語で、テキストを整えるために広く使用されている「Markdown」の編集に優れたサポートを提供しています。

本記事では、VSCodeでMarkdownを効率的に使いこなすための基本的な設定から応用テクニックまでを解説します。

記事内で紹介するVSCodeの表示は日本語表示です。日本語化していない方はコチラの記事で日本語にしておきましょう。
VSCodeを日本語で使おう! >>

Markdownファイルの作成

Markdownファイルの作成手順

手順1:新しいフォルダーの作成

わかりやすい場所に新しいフォルダーを作成します。

新しいフォルダーを作成

手順2:VSCodeでフォルダーを開く

VSCodeを起動し、上部のメニューから「ファイル」をクリックし、「フォルダーを開く」から作成したフォルダーを開きます。

VSCodeでフォルダーを開く

手順3:新しいファイルを作成

ファイルを作成し、拡張子を「.md」に設定します。

新しいファイルを作成

Markdownの基本シンタックス

見出し

見出しを作成するには、ハッシュタグ(#)を使用します。ハッシュタグの数で見出しのレベルを指定します。

使用例

# 見出し1
## 見出し2
### 見出し3
#### 見出し4

結果

見出し

リスト

番号付きリストは数字とピリオド(.)、箇条書きリストはハイフン(#)やアスタリスク(*)、プラス(+)を使用します。

使用例(番号付きリスト)

1. リスト1
2. リスト2
3. リスト3

結果

番号付きリスト

使用例(箇条書きリスト)

- リスト1
- リスト2
- リスト3

結果

箇条書きリスト

コードブロック(コードのまとまり)

コードブロックは三重バックティック(“`)を使用します。言語を指定するとシンタックスハイライトが適用されます。

使用例

```python
def greet(name):
    print(f"Hello, {name}!")
    
greet("Alice")
```

結果

コードブロック

リンク

角括弧でリンクテキストを囲み、丸括弧でURLを指定します。

使用例

[Google](https://www.google.com)

結果

リンク

画像

リンクと同様の形に、感嘆符(!)を追加して画像を挿入します。

使用例

![Pet Robot Cat](./image/pet_robot_cat.png)

結果

テーブル

パイプ記号(|)やハイフン(-)を使って表の作成が可能です。

使用例

| 名前       | 年齢 | 職業      |
|------------|------|-----------|
| 田中 太郎  | 25   | エンジニア |
| 鈴木 次郎  | 30   | デザイナー |
| 佐藤 三郎  | 22   | 学生      |

結果

テーブル

強調

アスタリスク(*) またはアンダースコア(_) を使ってテキストを強調します。

使用例

**このテキストは太字です。**
__このテキストも太字です。__

結果

強調

Markdownプレビュー機能

VSCodeでMarkdownをプレビューする方法はいくつかあります。

プレビューボタンの使用

VSCode画面の右上にあるプレビューボタンをクリックしてプレビューを表示します。

プレビューボタン

新しいタブでプレビュー

「Ctrl + Shift + V」 を押して、新しいタブでプレビューを表示します。複数のファイルを同時に編集する際に便利です。

新しいタブでプレビューを表示

Markdownの拡張機能

Markdownをより効果的に使うための拡張機能をいくつか紹介します。

Markdown All in One

Markdown All in One

「Markdown All in One」は、Markdownファイルを簡単に作成、編集、整理するための便利な拡張機能です。

  • テーブルの自動生成: 手間なくテーブルを作成できます。
  • 目次の作成: ドキュメントの目次を自動で作成します。
  • その他の便利な機能: チェックリストやシンタックスハイライトなど。

テーブルなど手間がかかるコードを自動で作成してくれるのでMarkdownの編集がとても簡単になります。

markdownlint

markdownlint

「markdownlint」は、Markdownファイルのスタイルチェックを行い、一貫性を保つためのルールを適用する拡張機能です。

  • スタイルチェック: Markdownファイルの書式を自動チェックし、エラーや警告を表示。
  • 一貫性の維持: ドキュメント全体で一貫したスタイルを保つのに役立ちます。
  • カスタマイズ可能なルール: プロジェクトに合わせてルールをカスタマイズできます。

Markdownファイルの品質を保ちながら、統一されたスタイルでドキュメントを作成できます。

Markdown PDF

Markdown PDF

「Markdown PDF」は、MarkdownファイルをPDF形式に変換するための拡張機能です。

  • 簡単な変換: MarkdownファイルをワンクリックでPDFに変換できます。
  • カスタマイズ可能な出力: 変換時にフォーマットやスタイルをカスタマイズできます。
  • 多用途な出力形式: PDF以外にもHTMLや画像形式に変換することも可能です。

Markdownドキュメントを簡単にPDFとして出力し、共有や配布が容易になります。

チートシートで効率アップ

Markdownのシンタックスやコマンドを一目で確認できるチートシートを作成することで、作業効率を大幅に向上させることができます。

特によく使うMarkdownの書式やコマンドをまとめておくと便利です。

プレビューが表示されない場合の対処法

ファイル拡張子を確認

Markdownファイルの拡張子が「.md」であることを確認します。

VSCodeを再起動

一時的なトラブルの可能性があります。VSCodeを再起動してみましょう。

拡張機能を確認

Markdown関連の拡張機能が正しくインストールされているか確認します。再インストールすることで解決する可能性があります。

VSCodeでMarkdownを使いこなそう!

今回は、VSCodeでのMarkdownの使い方や拡張機能などを紹介しました。基本的な設定から高度な機能までを活用することで、作業効率を大幅に向上させることができます。紹介した機能や拡張機能を活用して、Markdownを使いこなしましょう。