１．はじめに
お疲れ様です。エトです。
最近「VSCode」を使ってMarkdown形式で情報をまとめることが増えてきました。
個人的にはテキスト入力だけで体裁を整えられるのでWordよりも使いやすく、
タスク管理ツール「Backlog」でも使用するので重宝しているのですが、
Markdown記法を完璧にマスターできていないことが引っかかっていました。
ということで今回はMarkdown記法を学んだ結果のOutputとして、
「VSCodeで使えるMarkdown記法のチートシート」
を作成しました。
VSCodeでMarkdownファイルを扱う皆様の参考になれば幸いです。
２．動作環境・前提条件
- VSCodeバージョン：1.90.0
- OS：Windows11 Pro
- 使用しているMarkdown関連拡張機能
「Markdown Checkboxes」
「Markdown All in One」
「Markdown PDF」
「Markdown Preview Github Styling」 - Markdownファイルで使える記法を総じて「Markdown記法」と定義し、
HTMLのタグを使った記法も併せて記載する。
３．チートシート
%（パーセント）で囲まれた値は変数です。
| 記法名 | 入力値 |
|---|---|
| 見出し | # %見出し% |
| リスト・箇条書き | - %テキスト% |
| リスト・番号付き | %数字% %テキスト% |
| リスト・記号なし | 枠<dl>%文章%</dl>項目<dt>%大項目%</dt>要素<dd>%小項目%</dd>
|
| 空の行の挿入・改行 | <br> |
| 引用 | > %テキスト% |
| 改ページの線 | *** |
| コメントアウト | <!--%テキスト%--> |
| インライン表示 | `` |
| コード表示 | ``` |
| URLリンクの挿入 | <%URL%> |
| URLリンクのテキスト変更 | [%表示テキスト%](%URL%) |
| 画像の挿入 |  |
| 画像の挿入・サイズ調整 | <img width="%表示サイズ%" alt="%代替テキスト%" src="%URL%"> |
| 画像にURLリンクを設定 | [](%URL%) |
| テーブルの挿入 | （パイプ） |
| 斜体(Italic) | *%テキスト%* |
| 太字(Bold) | **%テキスト%** |
| 打消し線 | ~%テキスト%~ |
| テキストの色変化 | <font color="%カラーコード%">%テキスト%</font> |
| チェックリスト | - [ ] |
４．Markdown記法解説
見出し
文頭に# （シャープ+半角スペース）を入力する。
# レベル1
## レベル2
### レベル3
レベル1
レベル2
レベル3
リスト・箇条書き
文頭に- （ハイフン+半角スペース）を入力する。
* （アスタリスク+半角スペース）でも同様に機能する。
- test
- test
- test
- test
- test
- test
- test
- test
- test
リスト・番号付き
文頭に%数字% （指定の数字+半角スペース）を入力する。
1. test
2. test
3. test
- test
- test
- test
リスト・記号なし
リスト化したいテキスト全体：<dl>%文章%</dl>
大項目にするテキスト：<dt>%大項目%</dt>
小項目にするテキスト：<dd>%小項目%</dd>
<dl>
<dt>大項目1</dt>
<dd>小項目1-1</dd>
<dd>小項目1-2</dd>
<dt>大項目2</dt>
<dd>小項目2-1</dd>
<dd>小項目2-2</dd>
</dl>
- 大項目1
- 小項目1-1
- 小項目1-2
- 大項目2
- 小項目2-1
- 小項目2-2
空の行の挿入・改行
空の行を挿入、または改行したい行に<br>を入力する。
（半角スペース2つ）でも同様に機能する。
test<br>
test
test
test
test
test
VSCodeとQiitaで挙動が異なるため、記術例通りに入力しても機能しません。
VSCodeで上記記述例に則って入力した場合は以下のようになります。
test
test
test
引用
文頭に> （半角大なり+半角スペース）を入力する。
> test1,test2,test3
>> test1,test2,test3
test1,test2,test3
test1,test2,test3
改ページの線
線を表示させたい箇所に***（アスタリスク3つ）を入力する。
* * *（アスタリスク3つを半角スペースで分断）でも同様に機能する。
記号は_（アンダースコア）または-（ハイフン）でも同様に機能する。
***
* * *
コメントアウト
テキストの前後に<!--と-->を入力する。
<!-- 最終更新：2024年12月1日 -->
<!-- 変更内容：サブルーチンを追加 -->
記述例と同内容を記載していますが、
コメントアウトされているため表示されません。
インライン表示
インライン表示したいテキストの前後に``（バッククォーテーション）を入力する。
このような場合は`netstat`コマンドが有効です。
このような場合はnetstatコマンドが有効です。
コード表示
コードを入力した行の前後の行に```（バッククォーテーション3つ）を入力する。
netstat -an
記述例と同内容なので割愛しています。
URLリンクの挿入
URLをそのまま入力する。
<>（小なりと大なり）で囲んでも同様に機能する。
<https://qiita.com/>
https://qiita.com/
VSCodeではどちらの記述例でも上記のような表示になりますが、
QiitaでURLをそのまま入力した場合、以下のように表示されます。
URLリンクのテキスト変更
リンクさせたいテキスト：[]
リンクさせたいURL：()
[Qiitaトップページへ](https://qiita.com/)
画像の挿入
代替テキスト：[%代替テキスト%]
URLやファイルパスと画像タイトル：(%URL% "%画像タイトル%")
代替テキストと画像タイトルがなくても挿入自体は可能です。
「代替テキストを入力した場合」
音声読み上げや画像が読み込めない場合に使用されます。
「画像タイトルを入力した場合」
マウスポインタをかざした時に画像タイトルが表示されます。
画像の挿入・サイズ調整
画像のサイズ：img width="%表示サイズ%"
代替テキスト：alt="%代替テキスト%"
画像のソース：src="%URL%"
<img width="200" alt="狼のロゴ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476558/c029a8b4-9ebe-e41a-1cd0-e1ef8d71d60e.png">
画像にURLリンクを設定
挿入したい画像と代替テキスト：[]
リンクさせたいURL：(%URL%)
[](https://qiita.com/)
下記画像をクリックするとQiitaのトップページにつながります。
テーブルの挿入
|（パイプ）で区切ったスペースにデータを入力する。
1行目：列の名称
2行目：：（コロン）で文字を詰める方向を指定する。
3行目以降：テーブルとして表示される。
| 製品名 | 価格（円） | 個数 |
|:------|:------:|--------:|
| ※左詰め | ※中央詰め | ※右詰め |
| リンゴ | 120 | 12 |
| バナナ | 180 | 16 |
| みかん | 90 | 8 |
| 製品名 | 価格（円） | 個数 |
|---|---|---|
| ※左詰め | ※中央詰め | ※右詰め |
| リンゴ | 120 | 12 |
| バナナ | 180 | 16 |
| みかん | 90 | 8 |
パイプとデータの間に半角スペースを入力していますが、
入力しなくてもテーブルとして表示されます。
斜体(Italic)
テキストの前後に*（アスタリスク）を入力する。
_（アンダースコア）でも同様に機能する。
*Italic*
Italic
太字(Bold)
テキストの前後に**（アスタリスク2つ）を入力する。
__（アンダースコア2つ）でも同様に機能する。
**Bold**
Bold
打消し線
テキストの前後に~~（チルダ二つ）を入力する。
~~この表現には誤りがありました。~~
この表現には誤りがありました。
テキストの色変化
テキストの前後に<font color="%Color%">と</font>を入力する。
<font color="Red">red</font>
<font color="Blue">blue</font>
red
blue
チェックリスト
文頭に- [ ] （ハイフン+半角スペース+角括弧+半角スペース）を入力する。
角括弧の中にxを入力するとチェックを入れた扱いになる。
- [ ] 洗濯
- [x] 掃除
- 洗濯
- 掃除
VSCodeで使用する場合は拡張機能が必須です。
５．終わりに
内容に不足などあれば、ご指摘いただけると幸いです。
ご覧いただきありがとうございました。
６．参考にした文献・サイト