Zenn
🖋️

Markdown 記法 (VSCode)

2024/07/03に公開
VS Code
Markdown
tech

改行

  • パターン
    • <br>　※HTMLタグ
    • (半角スペース ×2) + 改行
  • 補足
    • 「 (半角スペース ×2) + 改行」は、編集時に扱いづらいため個人的には非推奨。
      本記事では以降使用しない。
  • 例
    文字列<br>この文字列は改行して表示される

    文字列
この文字列は改行して表示されない

    文字列<br>
この文字列は改行して表示される

文字修飾

斜体 ( Italic )

  • パターン
    • * + 文字列 + *
    • _ + 文字列 + _
  • 例
    普通の字<br>
*斜体1*<br>
_斜体2_<br>

太字 ( Bold )

  • パターン
    • ** + 文字列 + **
    • __ + 文字列 + __
  • 例
    普通の字<br>
**太字1**<br>
__太字2__<br>

太字&斜体 ( Bold&Italic )

  • パターン
    • *** + 文字列 + ***
    • ___ + 文字列 + ___
  • 例
    普通の字<br>
***太字&斜体1***<br>
___太字&斜体2___<br>

取り消し線 ( Strikethrough )

  • パターン
    ~~ + 文字列 + ~~
  • 例
    普通の字<br>
~~取り消し線~~<br>

数式 ( Formula )

数式の記述方法は KaTeX - Support Table を参照。

インライン数式 ( InlineFormula )

  • パターン
    $ + 数式 + $
  • 例
    $x^2 + y^2 = 1$<br>

数式ブロック ( FormulaBlock )

  • パターン
    $$ + 改行 + 数式 + 改行 + $$
  • 補足
    • ブロック内で改行する場合は、行末または次行に \\ を入れる。
  • 例
    $$
x^2 + y^2 = 1\\
e^{i\theta} = \cos\theta + i\sin\theta
\\
\left( \sum_{k=1}^n a_k b_k \right)^{\!\!2} \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
$$

コード ( Code )

インラインコード ( InlineCode )

  • パターン
    ` + 文字列 + `
  • 例
    `コード`

コードブロック ( CodeBlock )

コードブロック

  • パターン
    • ``` + 改行 + 文字列 + 改行 + ```
    • ~~~ + 改行 + 文字列 + 改行 + ~~~
  • 例
    ```
コード1
コード2
コード3
```

    ~~~
コード1
コード2
コード3
~~~

シンタックスハイライト付きコードブロック

  • パターン
    • ``` + 言語名 + 改行 + 文字列 + 改行 + ```
    • ~~~ + 言語名 + 改行 + 文字列 + 改行 + ~~~
  • 例
    ```C#
bool sampleFlag = false;
string sampleString = "Sample";
```

    ~~~C#
bool sampleFlag = false;
string sampleString = "Sample";
~~~

リンク

  • パターン
    [ + 文字列 + ] + ( + URL + )
  • 例
    [Google](https://www.google.co.jp)

タイトル付きリンク

  • パターン
    [ + 文字列 + ] + ( + URL + (半角スペース ×1) + " + マウスホバー用文字列 + " + )
  • 補足
    • 文字列上にマウスホバーした際、マウスホバー用文字列が表示される。
  • 例
    [Google](https://www.google.co.jp "Google TopPage")

定義参照リンク

  • パターン
    [ + 文字列 + ] + : + URL
  • 補足
    • 定義は使用箇所の前後どちらに記述しても良い。
    • 定義は Markdown の出力には表示されない。
  • 例
    [この文字列からも][Google]<br>
[こっちの文字列からも][Google]<br>
[Google] ←ここからも定義したリンク先へ飛ぶことができる<br>

[Google]: https://www.google.co.jp

引用

引用

  • パターン
    > + (半角スペース ×1) + 文字列
  • 補足
    • 引用を解除する場合は、引用した行の次の行を 1 行空ける。
  • 例
    > この文字列は引用表示される

    > この文字列は引用表示される<br>
この文字列も引用表示される

    > この文字列は引用表示される

この文字列は引用表示されない

多重引用

  • パターン
    >> + (半角スペース ×1) + 文字列
  • 補足
    • 以降、> を増やすと多重度も増す。
  • 例
    >> この文字列は多重引用表示される

    > この文字列は引用表示される
>> この文字列は多重引用表示される<br>
> この文字列も多重引用表示される
>
> この文字列は引用表示される

見出し ( Heading, Index )

  • パターン
    # + (半角スペース ×1) + 文字列
  • 補足
    • # は 6 個まで増やすことができる。
      7 個目以降は見出し表示にはならない。
  • 例
    # 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
####### 普通の文字列になる

リスト ( List )

小リストを内包する場合は、小リストのインデントを 1 つ下げる。

箇条書きリスト

  • パターン
    • * + (半角スペース ×1) + 文字列
    • + + (半角スペース ×1) + 文字列
    • - + (半角スペース ×1) + 文字列
  • 補足
    • *、+、- の混在は可能だが、編集時に扱いづらいため個人的には非推奨。
  • 例
    * リスト1
    * リスト1-1
        * リスト1-1-1
    * リスト1-2
* リスト2
* リスト3

    + リスト1
    + リスト1-1
        + リスト1-1-1
    + リスト1-2
+ リスト2
+ リスト3

    - リスト1
    - リスト1-1
        - リスト1-1-1
    - リスト1-2
- リスト2
- リスト3

番号付きリスト

  • パターン
    1 + . + (半角スペース ×1) + 文字列
  • 補足
    • 適切な番号に変換してくれるため半角数字はどの数字でも良いが、
      一般的には 1 を使用することが多い。
  • 例
    1. リスト1
    1. リスト1-1
        1. リスト1-1-1
    1. リスト1-2
1. リスト2
1. リスト3

表 ( Table )

基本

  • パターン
    行目 役割 内容
    1 ヘッダー | + 文字列 + |
    2 中身の文字寄せ設定 | + - + |
    3 中身 | + 文字列 + |
  • 補足
    • ヘッダー文字列は太字で表示される。
    • 列を増やしたい場合は、それぞれの行に列を追加すればよい。
  • 例
    |ヘッダー１|
|-|
|A|

    |ヘッダー１|ヘッダー２|
|-|-|
|A|B|

    |ヘッダー１|ヘッダー２|ヘッダー３|
|-|-|-|
|A|B|C|

文字修飾

ヘッダーの文字修飾が可能。
但し、デフォルトが太字のため、太字設定をしても変化はない。
1 行目 (ヘッダー) を編集する。

  • 例
    |*斜体*|**太字**|~~取り消し線~~|
|-|-|-|
|A|B|C|

文字寄せ

中身の文字寄せが可能。
但し、デフォルトが左寄せのため、左寄せ設定をしても変化はない。
2 行目 (中身の文字寄せ設定) を編集する。

左寄せ

  • パターン
    • -
    • :-
  • 例
    |左寄せ１|左寄せ２|左寄せ３|
|-|-|-|
|A|B|C|

    |左寄せ１|左寄せ２|左寄せ３|
|:-|:-|:-|
|A|B|C|

中央寄せ

  • パターン
    :-:
  • 例
    |中央寄せ１|中央寄せ２|中央寄せ３|
|:-:|:-:|:-:|
|A|B|C|

右寄せ

  • パターン
    -:
  • 例
    |右寄せ１|右寄せ２|右寄せ３|
|-:|-:|-:|
|A|B|C|

混合

  • 例
    |左寄せ|中央寄せ|右寄せ|
|:-|:-:|-:|
|A|B|C|

画像埋め込み ( Image )

  • 画像のパスは、Markdown ファイルからの相対パスを使用する。
  • フォルダ構成が下記の場合として説明する。
    サンプルフォルダ
    ∟ Markdown.md
    ∟ Image
    　 　∟ Image.png

画像埋め込み

  • パターン
    ! + [ + 画像が見つからない場合の表示文字列 + ] + ( + 画像のパス + )
  • 例
    ![Image\Image.png が見つかりません](Image\Image.png)
![Image\Image.png が見つかりません](..\サンプルフォルダ\Image\Image.png)

    ![Image.png が見つかりません](Image.png)

タイトル付き画像埋め込み

  • パターン
    ! + [ + 画像が見つからない場合の表示文字列 + ] + ( + 画像のパス + (半角スペース ×1) + " + マウスホバー用文字列 + " + )
  • 補足
    • 画像上にマウスホバーした際、マウスホバー用文字列が表示される。
  • 例
    ![Image\Image.png が見つかりません](Image\Image.png "Image")

コメント ( Comment )

コメントは Markdown の出力には表示されない。

1 行コメント

  • パターン
    <!-- + 文字列 + -->　※HTMLタグ
  • 例
    <!--コメント-->

複数行コメント

  • パターン
    <!-- + 改行 + 文字列 + 改行 + -->　※HTMLタグ
  • 例
    <!--
コメント1
コメント2
コメント3
-->

水平線 ( Line, HorizontalRule )

  • パターン
    • ---
    • ***
    • ___
  • 例
    ---

    ***

    ___

関連記事

https://zenn.dev/cafe_et_lapin/articles/7be872777795c4
https://zenn.dev/cafe_et_lapin/articles/6100c387ae7db0

Discussion