マークダウンでブログを書いてみた

Github PagesとJekyllでブログに挑戦

夏休みに海外に渡航する予定なのですが，その時の自分の体験や内省をどこかに記録し，せっかくなら勉強中のHTMLとCSSでブログを書いてみようと，こちらのサイトにWebページをデザインしていました．

ただ，実際に記事を書いていると，「これ，記事の数が増えていくとちょっとした変更でもめちゃくちゃ面倒にならないか，，？」と思い，他にいい方法がないかと調べたところ，Jekyllに辿り着きました．Jekyllは自動的に静的サイトを生成してくれるツールで，実際プロフィールや記事本文など最小限の編集だけで綺麗なWebサイトを作ってくれました．（ちなみに今回使っているのはMinimal Mistakesというテンプレートで，日本語の情報もネット上にたくさんあったので使ってみました．

実際かなり綺麗にサイトが作れたと思います．ここからは，リスティングやボックスや太字打ち消し線など，いろいろなマークダウンの記法を書き留めておこうと思います．

見出し

見出しは６種類ある．

見出し１

見出し２

見出し２の下には線が引かれる．

見出し３

見出し４

見出し5

見出し６もあるが，５と見た目は同じ．普段のブログで使うなら１〜３だけで事足りそう．

リスト（タスク管理・目標達成とかを描きたいときはこれでできる）

• [x] 完了したタスク
• [ ] 未完のタスク
• [ ] 未完のタスク

ボックスに文章を入れて表示する

一つ目のやり方

この二つに囲まれた区間に書かれたもの全ては，変数となり，のちのクラスで当てはめたcssに応じていろんな色や形のタグで囲まれる． markdownifyの左に変数を入れると，画面に表示される．

この二つに囲まれた区間に書かれたもの全ては，変数となり，のちのクラスで当てはめたcssに応じていろんな色や形のタグで囲まれる． markdownifyの左に変数を入れると，画面に表示される．

この二つに囲まれた区間に書かれたもの全ては，変数となり，のちのクラスで当てはめたcssに応じていろんな色や形のタグで囲まれる． markdownifyの左に変数を入れると，画面に表示される．

markdownifyの左に変数を入れると，画面に表示される．

---

二つ目のやり方（karm markdownで有効）

ここにある文章は「情報」として表示される． {: .notice–info}

ここにある文章は「危険」として表示される． {: .notice–warning}

ここにある文章は「成功」として表示される． {: .notice–success}

ここにある文章は「危険」として表示される． {: .notice–danger}

二つの記法は同じ結果を与えるので，「同じことを何回も書きたい」とき以外は下側のやり方でやるようにしようと思う．

---

いろいろな記法

こうすると太字になる

こうすると斜体になる

こうすると打ち消し線をつけられる

引用

引用はこのように行う．

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がサポートしている絵文字なら書ける．

番号付きのリスト

1. テキスト

2. テキスト

   3. テキスト

これもおそらく，間に空行が必要になる．

マークダウン記号

これまで特殊な意味を持っていた記号を普通に記号として使いたい時の記法．LaTexとかと同じ．
``

空行・改行

これは1行目の文章．
半角スペースを二つづけて次の行にすると，改行される．

画像の挿入

ブログを書くなら絶対に必要になってくる要素です．

site.baseurlがめちゃくちゃ大事でした．

他にもいろんな画像を表示してみます．

画像のサイズを調節するためには，以下のようにします．

脚注とその説明

CSS¹。 クリックすると脚注の詳細に飛びます．

1. CSS（カスケーディング・スタイル・シート） ↩