【Visual Studio Code】Markdownの導入と基本的な使用方法
VSCode
Markdown
2021/08/16
Markdown の導入
Visual Studio Code では、デフォルトで「Markdown Preview Enhanced」というアドオンがインストールされています。 特別な設定をせずとも、Markdown のプレビューや変換が可能です。
もしインストールされていない場合は、拡張機能からインストールしてください。
プレビューの表示
プレビューを表示するには Markdown ファイル（.md）を開いているエディタ上で右クリックをし、「Markdown Preview Enhanced: Open Preview to the Side」を選択します。
または、F1 キーを押して「Markdown Preview Enhanced: Open Preview to the Side」または「Markdown Preview Enhanced: Open Preview」を検索して選択します。 両者の違いは、画面を分割して表示するか否かだけです。
ショートカットキーが割り当てられているので、そちらでも表示できます。 ショートカットキーは、歯車アイコン > キーボードショートカットから確認してみてください。
基本構文
Markdown は、簡単にドキュメントを作成するための記法です。 本来は HTML へ変換するためのものでしたが、PDF などへも変換が可能です。
このブログの記事は、Markdown を HTML に変換し、CSS でデザインをしています。。
以下に Markdown の基本的な構文と、HTML への変換例を記載しておきます。
※「Markdown Preview Enhanced」の話のため、使用しているエディタなどによっては異なる効果だったり機能しないものがあったりします。
見出し
Markdown
# 見出し1
## 見出し2
### 見出し3 {#myid}
#### 見出し4 {.myclass}
##### 見出し5
###### 見出し6HTML
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3 id="myid">見出し3</h3>
<h4 class="myclass">見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>インライン要素
Markdown
*斜体*
**太字**
~~取消線~~
^上付文字^
~下付文字~HTML
<em>斜体</em>
<strong>太字</strong>
<s>取消線</s>
<sup>上付文字<sup>
<sub>下付文字<sub>リスト
順序なし
Markdown
- 項目1
- 項目2
- 項目3HTML
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>順序あり
Markdown
1. 項目1
1. 項目2
1. 項目3HTML
<ol>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ol>チェックリスト
Markdown
- [ ] 項目1
- [x] 項目2
- [ ] 項目3HTML
<ul>
<li><input type="checkbox">項目1</li>
<li><input type="checkbox" checked>項目2</li>
<li><input type="checkbox">項目3</li>
<ul>画像
Markdown
HTML
<img src="/img/image.png" alt="画像1">リンク
Markdown
[リンク](https://hogehoge.com)HTML
<a hreg="https://hogehoge.com">リンク</a>ライン
Markdown
---HTML
<hr>ブロッククォート
Markdown
> hoge
> fuga
> piyoHTML
<blockquote>
<p>hoge<br>
fuga<br>
piyo</p>
</blockquote>テーブル
Markdown
|header1|header2|header3|
|:--|:-:|--:|
|hoge|fuga|piyo|
|hoge|fuga|piyo|HTML
<table>
<thead>
<tr>
<th style="text-align:left">header1</th>
<th style="text-align:center">header2</th>
<th style="text-align:right">header3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">hoge</td>
<td style="text-align:center">fuga</td>
<td style="text-align:right">piyo</td>
</tr>
<tr>
<td style="text-align:left">hoge</td>
<td style="text-align:center">fuga</td>
<td style="text-align:right">piyo</td>
</tr>
</tbody>
</table>インラインコード
Markdown
This is `code`.HTML
This is <code>code</code>.コード（シンタックスハイライト）
Markdown
```javascript
const number = 123
console.log(number)
```HTML
<pre data-role="codeBlock" data-info="code:javascript" class="language-code:javascript"><code>const number = 123
console.log(number)
</code></pre>行番号、行強調
Markdown
```javascript {.line-numbers, highlight=2}
const number = 123
console.log(number)
```HTML
※割愛