マークダウンでブログを書いてみた
Github PagesとJekyllでブログに挑戦
夏休みに海外に渡航する予定なのですが，その時の自分の体験や内省をどこかに記録し，せっかくなら勉強中のHTMLとCSSでブログを書いてみようと，０からWebページをデザインしていました．
ただ，ためしに記事を書いていると，「これ，記事の数が増えていくとちょっとした変更でもめちゃくちゃ面倒にならないか，，？」と思い，他にいい方法がないかと調べたところ，Jekyllに辿り着きました．Jekyllは自動的に静的サイトを生成してくれるツールで，実際プロフィールや記事本文など最小限の編集だけで綺麗なWebサイトを作ってくれました．（ちなみに今回使っているのはMinimal Mistakesというテンプレートで，日本語の情報もネット上にたくさんあったので使ってみました．
自分の好きな色味に調節したりなど，かなり綺麗にサイトが作れたと思います．ここからは，リスティングやボックスや太字打ち消し線など，いろいろなマークダウンの記法を書き留めておこうと思います．
見出し
見出しは６種類ある．
見出し１
見出し２
見出し２の下には線が引かれる．
見出し３
見出し４
見出し5
見出し６もあるが，５と見た目は同じ．普段のブログで使うなら１〜３だけで事足りそう．
リスト（タスク管理・目標達成とかを描きたいときはこれでできる）
- 完了したタスク
- 未完のタスク
- 未完のタスク
ボックスに文章を入れて表示する
この二つに囲まれた区間に書かれたもの全ては，変数となり，のちのクラスで当てはめたcssに応じていろんな色や形のタグで囲まれる． markdownifyの左に変数を入れると，画面に表示される．
この二つに囲まれた区間に書かれたもの全ては，変数となり，のちのクラスで当てはめたcssに応じていろんな色や形のタグで囲まれる． markdownifyの左に変数を入れると，画面に表示される．
この二つに囲まれた区間に書かれたもの全ては，変数となり，のちのクラスで当てはめたcssに応じていろんな色や形のタグで囲まれる． markdownifyの左に変数を入れると，画面に表示される．
markdownifyの左に変数を入れると，画面に表示される．
いろいろな記法
こうすると太字になる
こうすると斜体になる
こうすると打ち消し線をつけられる
引用
引用はこのように行う．
Gitの思想について、Linus Torvaldsはかつてこう語ったと言われています。
“I’m an egotistical bastard, and I name all my projects after myself. First ‘Linux’, now ‘Git’.”
こうすると二重に引用ができる
さらに重ねることもできる．
コードブロック
ソースコードを記事の中に入れることもできる．
文章中にコマンドを示したいときはinline codeとする．
よくみるソースコードのボックスを作りたいときは，以下のようにする． 具体的には，Shift+@で打てるバックフォード↓
def hello(name)
puts "Hello, #{name}!"
end
hello("World")
#=> Hello, World!
もしくは，チルダ↓で書くことができる．
def hello(name)
puts "Hello, #{name}!"
end
hello("World")
#=> Hello, World!
ファイル名や言語の名前を書くためには，以下のようにする．（ボックスの内側に表示させる方法がある気がするのですが，見つけられませんでした．Qiita markdownだとできるみたい）
Ruby: hello.rb
def hello(name)
puts "Hello, #{name}!"
end
hello("World")
#=> Hello, World!
折りたたみ
三角をクリックして詳細を表示させる，折りたたみ機能をつけることもできる．
detailで囲んでsummaryで囲んだ範囲がサムネイルとして表示される．
野菜炒め１（整形なし）
1. 野菜**A**の皮を剥く。 2. 乱切りにする。 3. 調味料**B**と合わせて炒める。 - `火傷`に注意。野菜炒め２（整形あり）
1. 野菜**A**の皮を剥く。 2. 乱切りにする。 3. 調味料**B**と合わせて炒める。 - `火傷`に注意。空行を入れないと整形されないことに注意．
実際にはマークダウンプロセッサを変更したり，折りたたみをつけるのは若干厄介だった．
テーブル
表を書いてみる．
| ヘッダ1 | ヘッダ2 | ヘッダ3 |
|---|---|---|
| セル1 | セル2 | セル3 |
| セル4 | セル5 | セル6 |
エクセルのような表が簡単に作れる．ハイフンは３つ以上必要．
リンク
オートリンク拡張機能を有効にしていれば，リンクを貼るだけでリンクになる．
https://example.com
絵文字
Githubがサポートしている絵文字なら書ける．
番号付きのリスト
- テキスト
-
テキスト
- テキスト
これもおそらく，間に空行が必要になる．
マークダウン記号
これまで特殊な意味を持っていた記号を普通に記号として使いたい時の記法．LaTexとかと同じ．
``
空行・改行
これは1行目の文章．
半角スペースを二つづけて次の行にすると，改行される．
画像の挿入
ブログを書くなら絶対に必要になってくる要素です．
site.baseurlがめちゃくちゃ大事でした．
他にもいろんな画像を表示してみます．
画像のサイズを調節するためには，以下のようにします．
脚注とその説明
CSS1。 クリックすると脚注の詳細に飛びます．
-
CSS（カスケーディング・スタイル・シート） ↩