Markdown のすゝめ #2

文法編

2024-02-02

Markdown

はじめに

Markdown の良さを伝えたいので記事にしてみた。今回は第 2 回目。Markdown の文法について紹介する。

文法

別の解説ページを参考に載せておく。

ZennのMarkdown記法一覧

https://zenn.dev/zenn/articles/markdown-guide

GitHub Flavored Markdown Spec

https://github.github.com/gfm/

見出し

セクション、チャプターを分けるために使う。

h1 タグは基本的に使わず、h2 から使うことが多い。1 つの web ページに 1 つの h1 タグがあるというルールがある。

記法

# 見出し1 (使わない)
## 見出し2
### 見出し3
#### 見出し4

結果

見出し1 (使わない)

見出し2

見出し3

見出し4

引用

入れ子にすることもできる。

記法

> こんにちは。
> 先日はありがとうございました。
> またよろしくお願いします。
> 
> > こんにちは。
> > 先日はありがとうございました。
> > またよろしくお願いします。

結果

こんにちは。
先日はありがとうございました。
またよろしくお願いします。

こんにちは。
先日はありがとうございました。
またよろしくお願いします。

テキストの装飾

記法

これは *斜体* です。
これは **強調** です。
これは ~~取り消し線~~ です。
これは `code` です。

結果

これは斜体です。
これは強調です。
これは ~~取り消し線~~ です。
これは code です。

コードブロック

プログラムを載せたいときに使う。言語名とファイル名を指定することもできる。

記法

この例では、コードブロックの中にコードブロックを書いているためインデントを付けているが、本来は必要ない。

    ```
    console.log("Markdown");
    ```

    ```ts
    console.log("Markdown");
    ```

    ```ts:filename.ts
    console.log("Markdown");
    ```

結果

console.log("Markdown");

console.log("Markdown");

filename.ts

console.log("Markdown");

リンク

このサイトでは、これらの他にも Twitter と YouTube の埋め込みを作成できる。

URL をそのまま貼り付ける場合、< と > で囲む方が好ましい。このサイトでは両方の書き方が使える。

記法

[GitHub](https://github.com)

https://github.com

<https://github.com>

結果

GitHub

GitHub: Let’s build from here · GitHub

GitHub is where over 100 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, review code like a pro, track bugs and features, power your CI/CD and DevOps workflows, and secure code before you commit it.

https://github.com

GitHub: Let’s build from here · GitHub

https://github.com

画像

記法

![代替テキスト](IMG_2506.jpeg)

結果

テーブル

左揃え、右揃え、中央揃えができる。

記法

| Left align | Right align | Center align |
| :--------- | ----------: | :----------: |
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

結果

Left align	Right align	Center align
This	This	This
column	column	column
will	will	will
be	be	be
left	right	center
aligned	aligned	aligned

チェックボックス

- [ ] checkbox
- [x] checked

checkbox
checked

Mermaid

Mermaid.js を使って図を描くことができる。通常のコードブロックの言語名に mermaid を指定する。

このサイトでは Mermaid 未対応。これから対応する予定。

記法

    ```mermaid
    graph TD;
     A-->B;
     A-->C;
     B-->D;
     C-->D;
    ```

結果

graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

数式

KaTex を使って数式を記述できる。

記法

    これは $$C_L$$ です。

    $$
    L = \frac{1}{2} \rho v^2 S C_L
    $$

    ```math
    L = \frac{1}{2} \rho v^2 S C_L
    ```

結果

これは $C_L$ です。

L = \frac{1}{2} \rho v^2 S C_L

L = \frac{1}{2} \rho v^2 S C_L

定義リスト

拡張構文であるため、GFM では対応していない。対応しているサービスも少ないが、このサイトでは対応している。

記法

Node.js
: サーバーサイド JavaScript 実行環境

Deno
: Node.js の後継として開発された JavaScript 実行環境
: typescript が標準でサポートされている

typescript

: JavaScript のスーパーセットであり、静的型付けをサポートする

結果

Node.js: サーバーサイド JavaScript 実行環境
Deno: Node.js の後継として開発された JavaScript 実行環境; typescript が標準でサポートされている
typescript: JavaScript のスーパーセットであり、静的型付けをサポートする

Fenced Div

Qiita や Zenn で使える拡張構文。GFM では違う記法を使う。このサイトでは 2 種類の記法が使える。

記法

:::note
これはノートです。
:::

:::warning
これは警告です。
:::

結果

これはノートです。

これは警告です。

脚注

このサイトでは一番下に表示される。

記法

これは脚注です[^1]。

[^1]: これは脚注です。

結果

これは脚注です¹。

まとめ

Markdown の文法について紹介した。他にも拡張構文があるが、ここでは紹介しない。

これは脚注です。 ↩