markdown

• GitHub READMEやjekyllやQiitaなど様々な流派のmarkdownが存在する
• htmlで拡張したり、装飾を行える

markdownを書くのに使えるサービス

• GitHub
  • github markdownはstyleタグをデフォルトでサニタイズするため使用できるない
    • 参考
• jekyll
• stackedit.io

h1, h2, h3, h4

• #: h1
• ##: h2
• ###: h3
• ####: h4

bold

**foo** -> foo

italic

*foo* -> foo

strikethrough(打ち消し線)

~~foo~~ -> foo

list

space3つでサブリスト

1. a
2. b
3. c
   - d
   - e

1. a
2. b
3. c
   • d
   • e

links

[sometest](https://example.com)

images

![alt text](https://user-images.githubusercontent.com/4949982/159827727-f0776624-eefe-44d1-bf7c-c5e30852e5e9.png)

tables

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |

split

---

引用等へのアンカー

hrefとidが対応していればhrefをクリックした際にid側にジャンプする
アンカーの記法として、href側は#をつけ、id側はつけない

参考[<sup>1</sup>](#ref1)
...

 1. <a id="ref1" href="~~~">参考にした論文のタイトル</a>

html

GitHub READMEなどで画像を中央寄せしたいような場合

<div align="center">
  <img width="100px" src="https://user-images.githubusercontent.com/4949982/159827727-f0776624-eefe-44d1-bf7c-c5e30852e5e9.png">
</div>

jekyllなどcssの強制的な有効化を使ってセンタリングする

<div>
  <img style="align: center !important; width: 100px !important;" src="https://user-images.githubusercontent.com/4949982/159827727-f0776624-eefe-44d1-bf7c-c5e30852e5e9.png">
</div>

collapse, details

<div markdown="1"> ~ </div>で内部のmarkdownパースが働くjekyllが使うレンダラーなどもある

<details>
<summary>foo</summary>
<div markdown="1">
# なにかテキスト
</div>
</details>

iframe

• 許容されるmarkdownレンダラーとされていないものが混じっている

todo list

 - [] a
 - [x] b

• [] a
• b