【Visual Studio Code】Markdownの導入と基本的な使用方法

ツール

Markdownの導入

VSCodeでMarkdownを使用できるようにするためには、拡張機能を追加します。

いくつか種類はありますが、この記事ではMarkdown Preview Enhancedをおすすめします。

拡張機能の導入方法についてはこちらの記事を参考にしてください。

【Visual Studio Code】インストールと使い方についてサクッと解説
Visual Studio Code(VSCode)は、Microsoftが開発したソースコードエディタで、最近人気が急上昇しているエディタです。使いやすく、見た目も良いので初心者にオススメのエディタなので一度インストールしてみてはいかがでしょうか。

Markdownのプレビュー

プレビューを表示するには、Markdownファイル(.md)を開いているエディタ上で右クリックし、「Markdown Preview Enhanced: Open Preview to the Side」を選択します。すると、分割された画面にプレビューが表示されます。

ショートカットキーとして、Ctrl + K → V でもプレビューを表示することができます。

画面を分割したくない場合は、Ctrl + Shift + V でプレビューを表示します。

Markdownの構文

 見出し

# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

 id、classの追加

見出しには指定したid、classを付与することができます。

## 見出し(id) {#myid}
## 見出し(class) {.myclass}
<h2 id="myid">見出し(id)</h2>
<h2 class="myclass>見出し(class)</h2>

強調

*hoge*
**hoge**
***hoge***
~hoge~
~~hoge~~
<em>hoge</em>
<strong>hoge</strong>
<em><strong>hoge</strong></em>
<sub>hoge</sub>
<s>hoge</s>

リスト

順序なし

* Item1
* Item2
* Item3
<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
<ul>

順序あり

1. Item1
1. Item2
1. Item3
<ol>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
<ol>

タスクリスト

* [ ] Item1
* [x] Item2
* [ ] Item3
<ul>
  <li><input type="checkbox">Item1</li>
  <li><input type="checkbox" checked>Item2</li>
  <li><input type="checkbox">Item3</li>
<ul>

画像

![画像1](/img/image.png)
<img src="/img/image.png" alt="画像1">

リンク

[リンク](https://hogehoge.com)
<a hreg="https://hogehoge.com">リンク</a>

ライン

---
<hr>

ブロッククォート

> hoge
> fuga
> piyo
<blockquote>

  <p>
    hoge<br>
    fuga<br>
    piyo<br>
  </p>
</blockquote>

テーブル

|header1|header2|header3|
|:--|:-:|--:|
|hoge|fuga|piyo|
|hoge|fuga|piyo|
<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>

インラインコード

This is `code` .
This is <code>code</code>.

コード

```javascript
const number = 123
console.log(number)
```
<pre data-role="codeBlock" data-info="code:javascript" class="language-code:javascript"><code>const number = 123
console.log(number)
</code></pre>

行番号

```javascript {.line-numbers}
const number = 123
console.log(number)
```

行強調

```javascript {highlight=2}
const number = 123
console.log(number)
```

HTMLへの変換

HTMLファイルへ変換するには、プレビューを右クリックし、HTML > HTML(offline)を選択します。

カレントディレクトリにHTMLファイルが作成されるので確認してください。

 

- Visual Studio Codeのおすすめ書籍はコチラ -

コメント

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