🖋️

Markdown 記法 (VSCode)

2024/07/03に公開

改行

  • パターン
    • <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 中身 | + 文字列 + |
  • 補足
    • ヘッダー文字列は太字で表示される。
    • 列を増やしたい場合は、それぞれの行に列を追加すればよい。
  • |ヘッダー1|
    |-|
    |A|
    
    |ヘッダー1|ヘッダー2|
    |-|-|
    |A|B|
    
    |ヘッダー1|ヘッダー2|ヘッダー3|
    |-|-|-|
    |A|B|C|
    

文字修飾

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

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

文字寄せ

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

左寄せ

  • パターン
    • -
    • :-
  • |左寄せ1|左寄せ2|左寄せ3|
    |-|-|-|
    |A|B|C|
    
    |左寄せ1|左寄せ2|左寄せ3|
    |:-|:-|:-|
    |A|B|C|
    

中央寄せ

  • パターン
    :-:
  • |中央寄せ1|中央寄せ2|中央寄せ3|
    |:-:|:-:|:-:|
    |A|B|C|
    

右寄せ

  • パターン
    -:
  • |右寄せ1|右寄せ2|右寄せ3|
    |-:|-:|-:|
    |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