【ドキュメント作成】Markdownの基本とVSCodeでの環境構築

この記事では、ドキュメントやメモ等で活用できるMarkdownについて、基本的な使い方とVisualStudioCodeでの環境構築方法についてまとめています。

この記事で分かること
  • Markdownの概要と基本文法
  • VisualStudioCodeでのMarkdown編集環境構築方法
  • VSCode拡張機能 markdownlint Markdown All in One の役割と基本的な活用方法
目次

Markdown概要

Markdownは、文章をシンプルなテキスト記号で装飾できる軽量マークアップ言語です。

リッチなマークアップと比較して「プレーンテキストでも読みやすい」ことが大きな特徴で、HTMLへの変換も可能です。

その書きやすさや見やすさから、主にドキュメント(GitHubのREADME.mdや仕様書・Wiki)やノートで活用されます。

環境構築(VSCode)

今回は、VisualStudioCodeでのMarkdownの環境構築方法についてまとめます。

VSCodeは以下公式サイトから入手できます:

あわせて読みたい
Visual Studio Code – コード エディター | Microsoft Azure Edit, debug, and deploy on Azure with Visual Studio Code, a powerful code editor that works with nearly any language and runs on any OS.

拡張機能のインストール

VSCodeのサイドバーから拡張機能タブを開き、「Markdown」の検索でヒットする拡張機能
 markdownlint Markdown All in One をインストールします

markdownlint

markdownlintは、文法・記述スタイルのチェック(違反通知)やクイックフィックス機能を提供します。

以下のように、ルールに沿わないスタイルには河川で通知があり、「クイックフィックス」から修正が可能です。

Markdown All in One

Markdown All in One は、ショートカットや目次機能、自動補完といったMarkdownを記述するにあたって便利な機能をまとめて提供します。
ここでは、特に有用性の高い機能やショートカットについてまとめておきます。

動作ショートカット動作イメージ
選択した範囲を太字にするCtrl + B
見出しレベルの切り替えCtrl+Shift+]
Ctrl+Shift+[
チェックボックス状態切り替えAlt + C
テーブル(表)のフォーマットAlt+Shift+F
テキストにリンクを設定する1. テキストを選択
2. URLを貼り付け(Ctrl+V)
補足:フォーマッタ設定

同一のファイル形式について複数のフォーマッタが導入されている場合は、以下のような確認メッセージが表示されます。

「構成」をクリックし、適用したいフォーマッタを選択します。(今回の場合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ファイルの作成

Markdownファイルの拡張子は、「.md」です。

VSCodeでMarkdownファイルを扱う場合は、エクスプローラーで新規ファイル>.md拡張子でファイルを作成します。

Markdownの基本文法

ここからはMarkdownの基本文法について、よく使用するものを抜粋してまとめていきます。

見出し(Heading)

# の数でレベルを指定します(HTMLの <h1><h6> に相当)。

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

強調(Bold / Italic)

  • 太字**強調** または __強調__
  • 斜体*斜体* または _斜体_
  • 取り消し線~~取り消し~~
**太字**
*斜体*
~~取り消し線~~

リスト

箇条書き(順不同リスト)

- または * を使います。

- 項目1
- 項目2
  - サブ項目

番号付きリスト(順序リスト)

数字 + . を使います。

1. 項目1
2. 項目2
3. 項目3

リンクと画像

リンク

[表示テキスト](URL)
[Google](https://www.google.com)

画像

![代替テキスト](画像URL)
![サンプル画像](https://example.com/image.png)

引用

文章の前に > をつけます。

> 引用文

コード

インラインコード

文中にコードを書く場合は ` で囲みます。

これは `inline code` です。

複数行コード(コードブロック)

``` python
a = 10 + 5
print(a)  # 15
```

水平線

--- を1行に書くと区切り線になります。

---

表(テーブル)

| 見出し1 | 見出し2 |
|--      |--       |
| 内容1   | 内容2   |
| 内容3   | 内容4   |

おわりに

この記事では、Markdownの基本とVSCodeでの環境構築についてまとめました。

より実用的な活用方法として、
ナレッジサイトのようなドキュメントページ構成を行いたい場合はMkdocs
ローカル環境で活用するノートとしての用途で使いたい場合はObsidianなどもおすすめです。

おすすめの本:

  • URLをコピーしました!
目次