INSIGHT

情報・インサイト

【チートシート付き】VS Codeで始めるMarkdown

2020.07.17

ドキュメントのイメージ

今では多くのエンジニアが利用しているVisual Studio Code。VS CodeにはMarkdownで綺麗なドキュメントを作る機能が存在します。
しかし、「Markdownを覚えるのが面倒」「WordやExcelのほうがドキュメントは作りやすい」と考えてしまいがちです。
そこで今回は、VS Codeで始めるMarkdownと題しまして、皆様をMarkdownの世界に誘おうと思います。
Markdownはslackなどでも使える言語です。ぜひ実践してみてください。

VSCodeの環境を整える

ではまず、VS CodeでMarkdownを扱う環境を構築します。

VSCodeを開いてください。「ファイル」から「名前をつけて保存」をクリックします。
ファイル名を「任意のファイル名.md」にして「保存」をクリックし、ファイルを保存します。

以上です。たったこれだけで、Markdownの環境構築は完了です。

Markdownチートシート

Markdownはとてもシンプルなマークアップ言語です。そのため、HTMLよりも手軽に、そしてきれいなドキュメントを作成できます。

基本的な文法をこれから記載します。

見出し

#の数を変えることで、見出しのレベルを調整できます。

# h1
## h2
### h3
#### h4
##### h5
###### h6

テキストの装飾

HTMLタグのように装飾したい文字を囲みます。

*イタリック*
**太字**
~~打消し線~~

ソースコード

複数行の場合は“`java のように言語を指定すればVS CodeやGitHub,Gitbucketではハイライトもつけてくれます。

一行のソースコード ` echo 'Test'; `

```php
//複数行のソースコード
$test = 'test';
return $test
```

引用

文章の引用等に使えます。

> 引用したい文章
>>二重引用もできます
>

リンク

Markdownではリンクも簡単に表現できます

[ウィズテクノロジー](https://whizz-tech.3good-house.com/wp/

水平線

文章を区切りたいときに便利です。

---

テーブル

少し複雑ですが、テーブルも表現できます。

| 左寄せ | 中央寄せ | 右寄せ |
|:------|:--------:|-------:|
| 左    | 中央     | 右    |

箇条書き

箇条書きも簡単に表現できます。

* その1
* その2
* その3

プレビュー

VS CodeではMarkdownのプレビュー機能もあります。

右上の

プレビューボタン

をクリックしてください。

右側にプレビューが表示されます。

VSCodeのプレビュー

Markdownはとても便利なのでぜひ皆さんも使ってみてください。

WORKS

導入事例

ウィズテクノロジーは大阪を拠点に、システム開発の分野で20年の実績を持つパートナー企業です。
業務効率化やDX支援など、さまざまな課題にワンストップで対応。
経験豊富なエンジニアが、企業の成長を技術面からしっかりサポートします。

導入事例一覧を見る
導入事例一覧を見る

RECRUIT

採用情報

未来に、価値ある選択を。

All WhizzTechnologyは、期待を超える価値をともにつくり、より良い未来へ導く仲間を募集しています。