GitHubでブログの作成 - Markdown Markup 違い-

github octopress Markdown

GitもRubyもやったことない人間が興味本位でOctopressを始めようとしたので、
驚く位ブログを立ち上げるだけで時間をとられてしまった。
後で、導入方法を記述する予定。
Octopress で記事を作成するには Markdown なる記述方法が必要とのこと。
Markup(HTML)は書いているのである程度わかるものの、知らなかったので調べてみたことを備忘録がてら記述。

Markdownとは？自分解釈

  • 軽量マークアップ言語 (結局はマークアップ言語のHTMLに直す)
  • 簡単
  • 少ないテキストでマークアップできる
  • class id をつけられない === 結局HTML使うらしい。

Markdown Markup 違い

  • Markup … <タグ>sample</タグ>
  • Markdown … #記号 #h1見出し ##h2見出し 以降記号と表現する。

お固い解釈など興味のある方は 本家へ http://daringfireball.net/projects/markdown/

見出し #h1〜h6

1
2
3
4
5
6

# 見出しh1
## 見出し h2
### 見出し h3
#### 見出し h4
##### 見出し h5
###### 見出し h6

見出し h1

見出し h2

見出し h3

見出し h4

見出し h5
見出し h6

見出しの別の書き方

1
2
3
4

Title1 の下に=
=
Title2 の下に-
-

Title1 の下に=

Title2 の下に-

段落 p

1
2
3

段落を分けるには改行の後に

空白を入れるだけ。

改行するには改行の後に

空白を入れるだけ。

改行 br

1
2
3
4

複数行で改行を入れたい場合は、  
改行の後に半角スペース2回以上入れる。  
改行するだけでは、
改行されないので

複数行で改行を入れたい場合は、
改行の後に半角スペース2回以上入れる。
改行するだけでは、 改行されないので

強調 em strong

1
2
3
4

強調を示す場合は*(アスタリスク) で囲むか  
_(アンダースコア) で囲む  
*em* は＊か＿で一つ囲む  
__strongは__ ＊か＿で二つ囲む

強調を示す場合は*(アスタリスク) で囲むか
_(アンダースコア) で囲む
em は＊か＿で一つ囲む
strong は ＊か＿で二つ囲む

引用 bvockquote

1
2

> 引用な文章です。
> > 入れ子にすることもできる。

引用な文章です。

入れ子にすることもできる。

リスト番号なし ul > li

1
2
3
4

リストを示すには*(アスタリスク),-(ハイフン),+(プラス)のどれかを入力し、スペースまたはタブで挿入する。
* 上下に空白を一つ入れよう
+ 記号の前に空白をつけると見れなくなるよ
- 記号の後に入れるスペースをお忘れなく

リストを示すには*(アスタリスク),–(ハイフン),+(プラス)のどれかを入力し、スペースまたはタブで挿入する。

  • 上下に空白を一つ入れよう
  • 記号の前に空白をつけると見れなくなるよ
  • 記号の後に入れるスペースをお忘れなく

リスト番号あり ol > li

1
2
3
4

1. item1 数字は適当でも
3. item3 順番に表示
2. item2 されるよ!
2. item4 便利だね。
  1. item1 数字は適当でも
  2. item3 順番に表示
  3. item2 されるよ!
  4. item4 便利だね。

リンクを書く

1
2
3
4
5
6
7

自動リンク http://sawasawato.github.io/

[インラインリンク](http://sawasawato.github.io/)

[外部参照リンク][1]

[1]:http://sawasawato.github.io/ "Title属性もつけれるよ"

自動リンク http://sawasawato.github.io/

インラインリンク

外部参照リンク

画像を読み込む img

1
2
3
4
5
6
7

![Altタグだよ](pass/sawasawato.img)

![Altタグだよ][1]

[1]:pass/sawasawato.img

[![画像にリンクをはるよ](pass/sawasawato.img)](http://sawasawato.github.io/)

Altタグだよ

Altタグだよ

画像にリンクをはるよ

コードブロックを書く1 pre > code

1
2
3

コードブロックの書き方
  スペースを4つつける?   
  自分の環境だとタブ一つできく
コードブロックの書き方
スペースを4つつける?   
自分の環境だとタブ一つできく

コードブロックを書く2 pre (このブログは設定変更中)

1
2
3
4
5

 ```
コードを書くときなど、<S+@>の`(バッククオート)
をつなげた`で文章を囲む。  
`は二つつなげると"と判断されるよう。この機能じゃまだな。。。
 ```

水平線 hr

1
2
3
4

-を3つつなげる
 ---
*を3つつなげる
 ***

-を3つつなげる

*を3つつなげる

マークダウン記号をエスケープさせる

1

/#

/#

こういう時は素直にマークアップを使おう

  • リンクをターゲットブランクにしたい
  • タグにクラスやIDをつけたい
  • ここで紹介された以外のHTMLタグを使いたい

感想

細かな設定は結局 HTML になるものの、新しい面白い技術。
vim + Zencoding = Emmet を積んでカスタマイズしても、Markdownの方が、早く書くことができる。
でも画像の入力が手間+属性をつけられないので、画像の管理が面倒
画像はローカルじゃなくてクラウドで管理してる人が多いみたい
あくまでテキストベースなので、float 使ったカラムの変更とかは向かないのがなんかもったいない。
割とvimとは相性が良くない方かもだけど、vimrcにスにペッドを書いてもよさそう。
とりあえず、スペースの可視化は必須かな

1
2

set list
set listchars=tab:>-,extends:<,trail:-,eol:<

細かなvimrcの設定が気になる方はこの方を参考に
http://blog.remora.cx/2011/08/display-invisible-characters-on-vim.html

なんか悔しいけどwこれはEmaxの方が書きやすいかも

参考にさせていただいた偉人の方々 -SpecialThanks-

ドットインストール 田口さんは偉大w
http://dotinstall.com/lessons/basic_markdown

Milk+eaさん
http://totora0155.hatenablog.jp/entry/2013/03/11/220213

mimemoさん
http://www.miukoba.net/blog/2013/01/05/start-octopress/

ゆっくりとさん
http://tokkono.cute.coocan.jp/blog/slow/index.php/programming/markdown-skills-for-github-beginners/

こじかさん いつも勉強させていただいてます
http://kojika17.com/2013/01/starting-markdown.html