title: Pelicanを導入した
author: Amane Katagiri
summary: モダン
date: 2016-11-05T12:55:00+09:00
modified: 2022-02-05T09:52:00+09:00
category: tech
license: CC BY 4.0
rating: sfw
ai_summary: 自作CMSからGitHub Pagesへの移行を機に、Markdown環境をGFM（GitHub Flavored Markdown）風に強化した記録です。取り消し線、引用、絵文字、目次、脚注、チェックリストなどを実現する各種拡張機能の導入例が、実際の表示サンプルと共に紹介されています。静的サイト公開における執筆環境の改善と、標準的なマークアップ記法の動作確認を兼ねた内容となっています。
ai_keywords: GitHub Pages, Markdown, GFM, 拡張機能, 静的サイト, Cloudflare, Python-Markdown, マークアップ, 技術ブログ, カスタマイズ
[TOC]
いい加減オレオレCMSも嫌になってきたので、GitHub Pagesで静的サイトを公開するという3億年前くらいの流行りを取り入れることにした。
ついでにCloudflareを挟んでみたり。
それにあたってmarkdownに拡張をガン盛りして[GFM](https://guides.github.com/features/mastering-markdown/)ライクにしたので、ここに喜びを記しておきます。
# [markdown-del-ins](https://pypi.org/project/markdown-del-ins/)
```text
GFMライクな~~取り消し線~~の追加や++挿入部分++の明示ができます。
```
GFMライクな~~取り消し線~~の追加や++挿入部分++の明示ができます。
# [mdx_cite](https://pypi.python.org/pypi/mdx_cite)
```text
"""引用元の資料"""を`content`で囲みます。
```
"""引用元の資料"""を`content`で囲みます。
# [mdx_unimoji](https://pypi.python.org/pypi/mdx_unimoji/)
I :heart: you! Just kidding. :stuck_out_tongue: :sparkles: :camel: :boom:
# [toc](https://python-markdown.github.io/extensions/toc/)
```text
[TOC]
```
冒頭の目次はこれです。title引数とかでタイトルも付けられます。
# [footnotes](https://python-markdown.github.io/extensions/footnotes/)
```text
脚注[^footnote]を定義できます。CSSをちょっといじらないと[^css]、脚注間の移動でレイアウトが破滅する[^explode]みたいです。
[^footnote]: footnoteとも言う。
[^css]: bootstrapの`:target:before`を消す。
[^explode]: 脚注番号だけ上に行ったりする。
```
脚注[^footnote]を定義できます。CSSをちょっといじらないと[^css]、脚注間の移動でレイアウトが破滅する[^explode]みたいです。
[^footnote]: footnoteとも言う。
[^css]: bootstrapの`:target:before`を消す。
[^explode]: 脚注番号だけ上に行ったりする。
# checklist(in [pymdown-extensions](https://github.com/facelessuser/pymdown-extensions))
```text
- [x] GFMライクなチェックリストを
- [x] 入れ子の
- [x] チェックリストです
- [ ] 書くことができます
```
- [x] GFMライクなチェックリストを
- [x] 入れ子の
- [x] チェックリストです
- [ ] 書くことができます
# dlで定義リストを作成します
```text
dt1
: dtでリストの項目を定義し、ddでリストの内容を記述します。
dt2
: ddには複数行記述できます。
: こんな感じですね。
dt3
: ただし、dtの上には改行が必要です。
: 改行がない場合は下のようになります。
dt4
: このdtの上には改行がなく、dt3のddの一部がdtとして扱われています。
: さらに、このブロックが入れ子になったdlとして扱われています。
dt4
: スタイルのせいだと思うのであればソースを見てください。
: 我々が使いこなすには少々複雑で意味のない動作をしています。
```
dt1
: dtでリストの項目を定義し、ddでリストの内容を記述します。
dt2
: ddには複数行記述できます。
: こんな感じですね。
dt3
: ただし、dtの上には改行が必要です。
: 改行がない場合は下のようになります。
dt4
: このdtの上には改行がなく、dt3のddの一部がdtとして扱われています。
: さらに、このブロックが入れ子になったdlとして扱われています。
dt4
: スタイルのせいだと思うのであればソースを見てください。
: 我々が使いこなすには少々複雑で意味のない動作をしています。
# tableで表を作成します
```text
| th | th-centered | th-righted |
| ----- |:----------------:| ----------:|
| cell1 | 1970-01-01 | 123 |
| cell2 | T | 456 |
| cell3 | 00:00 | 789 |
```
| th | th-centered | th-righted |
| ----- |:----------------:| ----------:|
| cell1 | 1970-01-01 | 123 |
| cell2 | T | 456 |
| cell3 | 00:00 | 789 |
# `#`でヘッダを記述します
```text
## これはh2です。
h2といっても実際はもっとグレードを下げられています。
### h3や
そのため、h3ならまだしも、
#### h4まで続きます。
h4まで来るとスタイルによっては本文より小さくなっていることがあります。
```
## これはh2です。
h2といっても実際はもっとグレードを下げられています。
### h3や
そのため、h3ならまだしも、
#### h4まで続きます。
h4まで来るとスタイルによっては本文より小さくなっていることがあります。
# `*+-`でリストを記述します
```text
* どの記号を使ってもリストを記述できます。
* 入れ子は、
- インデントで行います。
インデントを下げておくと、複数の段落を含めることができます。
- スペースが許す限り、
+ 深い入れ子にできます。
* ガンガン
- 掘るといいです。
リストとリストの間には何か書いてください。
1. olの場合は、数字とドットで記述します。
2. 数字にはあまり意味がなく、
3. こんな風にしても、
2. 順番に直してくれますね。
4. ulと同じで深くインデントできます。
```
* どの記号を使ってもリストを記述できます。
* 入れ子は、
- インデントで行います。
インデントを下げておくと、複数の段落を含めることができます。
- スペースが許す限り、
+ 深い入れ子にできます。
* ガンガン
- 掘るといいです。
リストとリストの間には何か書いてください。
1. olの場合は、数字とドットで記述します。
2. 数字にはあまり意味がなく、
3. こんな風にしても、
2. 順番に直してくれますね。
4. ulと同じで深くインデントできます。
# `>`で引用します
```text
> markdownの練習
>> 引用は入れ子できます。
> markdownの練習
```
> markdownの練習
>> 引用は入れ子できます。
> markdownの練習
# コードはバッククオートで囲んで記述します
> \`\`\`bash
> echo "start"
> find ~ -type f -name "hoge*.txt" -print0 | xargs -0 grep "TEXT"
> echo "finished."
> \`\`\`
>
> 普通のテキストと\`コード断片\`です。\\\`\\\`で囲むと\`\`バック\`クオート\`が使え\`\`ます。
```bash
echo "start"
find ~ -type f -name "hoge*.txt" -print0 | xargs -0 grep "TEXT"
echo "finished."
```
普通のテキストと`コード断片`です。\`\`で囲むと``バック`クオート`が使え``ます。
# その他のマークアップです
```text
## b, i
**強く強調** したり、 *強調* したりします。
## hr
------
## a
[return to top](/top "タイトル")
## img
{width=600 height=315}
```
## b, i
**強く強調** したり、 *強調* したりします。
## hr
------
## a
[return to top](/ "タイトル")
## img
{width=600 height=315}
