【チートシート】Markdown記法一覧
はじめに
はじめまして．Zennを始めました．
来年4月から未経験でソフトウェアエンジニアとして働きます．
転職に向けて勉強を進めていましたが，アウトプットをしながらの方が効率が高いと考え，今後学習したことなどを記録していこうと思います．
Zenn独自の記法が必要なところもありますが．そもそもMarkdown記法が初めてなのでまずは自身の備忘録として記事に残したいと思います．
【テキストの表記】
見出し
# これはH1タグです
## これはH2タグです
#### これはH4タグで
リスト
- Hello!
- Hola!
- Bonjour!
* Hi!
結果
- Hello!
- Hola!
- Bonjour!
- Hi!
リストのアイテムには*もしくは-を使います．
番号付きリスト
1. First
2. Second
結果
- First
- Second
【インラインスタイル】
強調・強勢
_ か * で囲むとHTMLのemタグになります。Zennでは *italic type* になります。
__ か ** で囲むとHTMLのstrongタグになります。Zennでは **太字** になります。
結果
_ か * で囲むとHTMLのemタグになります。Zennでは italic type になります。
__ か ** で囲むとHTMLのstrongタグになります。Zennでは 太字 になります。
打ち消し線
打ち消し線を使うには ~~ で囲みます。 ~~打ち消し~~
結果
打ち消し線を使うには ~~ で囲みます。 打ち消し
インラインでコードを挿入する
インラインで`code`を挿入する
結果
インラインでcodeを挿入する
インラインのコメント
自分用のメモをしたいときは，HTMLのコメント記法を使用できる．
<!-- TODO: ○○について追記する -->
この形式は複数行のコメントには対応していない．
また，公開ページ上では表示されない．
【Zenn独自の記法】
アコーディオン（トグル）
:::details タイトル
表示したい内容
:::
結果
タイトル
表示したい内容
メッセージ
:::message
メッセージをここに
:::
結果
:::message alert
警告メッセージをここに
:::
結果
要素をネストさせるには
外側の要素の開始/終了に:を追加する．
::::details タイトル
:::message
ネストされた要素
:::
::::
結果
タイトル
【テキストや画像を挿入する】
テキストリンク
[アンカーテキスト](リンクのURL)
結果
ZennのMarkdown記法一覧
Ctrl + kのショートカットでも挿入可能
画像
結果
画像の横幅を指定する
画像の表示が多きすぎる場合は，URLの後に半角スペースを空けて=○○×と記述すると，画像の幅をpx単位で指定できる．
結果
キャプションをつける
画像のすぐ下の行に*で挟んだテキストを配置すると，キャプションのような見た目で表示される
*キャプション*
結果
caption
画像にリンクを貼る
以下のようにすることで画像に対してリンクを貼ることもできる．
[](リンクのURL)
結果
*↑画像をクリックすると別URLへ移動
テーブル
| Head | Head | Head |
| ---- | ---- | ---- |
| Text | Text | Text |
| Text | Text | Text |
結果
| Head | Head | Head |
|---|---|---|
| Text | Text | Text |
| Text | Text | Text |
【コードを挿入する】
コードブロック
コードは「```」で挟むことでブロックとして挿入可能．以下のように言語を指定するとコードへ装飾（シンタックスハイライト）が適用される．
```言語名 ```
ファイル名を表示する
言語名:ファイル名と:区切りで記載することで，ファイル名がコードブロックの上部に表示されるようになる．
print('Hello World')
diffのシンタックスハイライト
diffとゲンゴン尾ハイライトを同時に適用できる．
以下のようにdiffと言語名を半角スペース区切りで指定する．同時にファイル名を指定することも可能．
なお，diffの使用時には，先頭に+，-，半角スペースのいずれかが入っていない行はハイライトされない．
```diff python:ファイル名 ```
結果
+ print('Hello')
- print('Good bye')
【数式を挿入する】
ZennではKaTeXによる数式表示に対応している．
数式のブロックを挿入
$$で記述を挟むことで，数式のブロックが挿入される．
$$
e^{i\theta} = \cos\theta + i\sin\theta
$$
結果
インラインで数式を挿入
$a\ne0$というように$ひとつで挟むことで，インラインで数式を含めることができる．
引用
> 引用文
> 引用文
結果
引用文
引用文
注釈
注釈を指定するとページ下部にその内容が表示される．
脚注の例[^1]です。インライン^[脚注の内容その2]で書くこともできます。
[^1]: 脚注の内容その1
結果
区切り線
-----
結果
【ダイアグラム】
```mermaid
graph TB
A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]
```
結果
他にもシーケンス図やクラス図が表示できる．文法はmermaid.jsに従っているため，どのように書けば良いかは公式サイトの文法を参照する．
最後に
Markdown記法を学べました．
まだまだ曖昧なところも多いですし，今回は記載しなかった部分もありあります．ですが自分のチートシートを作成することができたので，今後忘れてしまったところは都度立ち返って調べながら執筆していければと思います．
本記事に関わらず，これから自分の成長とともに書いた記事が広がり，同じように未経験からエンジニアになる方に少しでもお役にたてると嬉しいです．
最後まで読んで頂きありがとうございます！
Discussion