はてなブログで使えるMarkdown記法
今更はてな記法を覚えるのも何なんで、より汎用的なマークダウンでブログを書こうと思い調べてみた。 マークダウンにも結構方言があるようで、はてなで使えるものをまとめてみる。
見出し
行頭を#にすると見出しになります。
Markdown
# 見出し h1 ## 見出し h2 ### 見出し h3 #### 見出し h4 ##### 見出し h5 ###### 見出し h6
出力結果
見出し h1
見出し h2
見出し h3
見出し h4
見出し h5
見出し h6
HTML
<h1>見出し h1</h1> <h2>見出し h2</h2> <h3>見出し h3</h3> <h4>見出し h4</h4> <h5>見出し h5</h5> <h6>見出し h6</h6>
H1とH2のみだが、次行の行頭を = または - （数は任意）にする書き方もあり。
見出し h1 ======= 見出し h2 ---------
段落
段落が変わるときは空行をあける。
Markdown
吾輩 は猫である。 ←半角スペース２こ 名前はまだ無い。 どこで生れたかとんと見当がつかぬ。 ←半角スペース２こ 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
出力結果
吾輩 は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
HTML
<p>吾輩 は猫である。<br> 名前はまだ無い。</p> <p>どこで生れたかとんと見当がつかぬ。<br> 何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
段落内で改行したい場合は行末を半角スペース２つ以上で終わらせる必要がある。
以前はpreで括られていたが、いつの間にか変わったようだ。
強調
** または __ で囲むと太字になり、* または _ で囲むと斜字になる。
Markdown
吾輩は**猫**である。 名前はまだ__無い__。 吾輩は*猫*である。 名前はまだ_無い_。
出力結果
吾輩は猫である。 名前はまだ無い。 吾輩は猫である。 名前はまだ無い。
HTML
<p>吾輩は<strong>猫</strong>である。 名前はまだ<strong>無い</strong>。</p> <p>吾輩は<em>猫</em>である。 名前はまだ<em>無い</em>。</p>
リスト
行頭を*または+ または- にするとリストになる
Markdown
* これはリスト
+ これもリスト
- これもリスト
* これはインデントしたリスト
+ これはインデントしたリスト
- これはインデントしたリスト
出力結果
- これはリスト
- これもリスト
- これもリスト
- これはインデントしたリスト
- これはインデントしたリスト
- これはインデントしたリスト
HTML
<ul> <li>これはリスト</li> <li>これもリスト</li> <li>これもリスト <ul> <li>これはインデントしたリスト</li> <li>これはインデントしたリスト</li> <li>これはインデントしたリスト</li> </ul> </li> </ul>
順序リスト
数字とピリオドで始めると順序リストになる
Markdown
1. これはリスト
1. これもリスト
1. これもリスト
1. これはインデントしたリスト
1. これはインデントしたリスト
1. これはインデントしたリスト
出力結果
- これはリスト
- これもリスト
- これもリスト
- これはインデントしたリスト
- これはインデントしたリスト
- これはインデントしたリスト
行の順番で勝手にナンバリングされるので、後で変更する可能性を考えてすべて 1. としてもOK。
HTML
<ol> <li>これはリスト</li> <li>これもリスト</li> <li>これもリスト <ol> <li>これはインデントしたリスト</li> <li>これはインデントしたリスト</li> <li>これはインデントしたリスト</li> </ol> </li> </ol>
水平線
３つ以上の * - _ だけの行は罫線になる。
Markdown
*** - - - _ _ _
HTML
<hr> <hr> <hr>
リンク
自動リンク
<>でURLかメールアドレスを囲むだけ。
HTML
<a href="http://www.yahoo.co.jp">http://www.yahoo.co.jp</a> <a href="mailto:hoge@detarame.com">hoge@detarame.com</a>
オリジナルのMarkdownではスパム対策としてメールアドレスは以下のような文字参照にしてくれるのだが、はてな版ではしてくれないみたい。
<a href="mailto:hoge@detarame.com">hoge@detarame.com</a>
直接リンク
[ラベル](url "タイトル") の形式でリンクになります。
Markdown
[Yahoo Japan](http://www.yahoo.co.jp "Yahoo Japan")
HTML
<a href="http://www.yahoo.co.jp" title="Yahoo Japan">Yahoo Japan</a>
参照リンク
[key]: url titleの形式でURLをconst定義しておいて、使いたい場所で[表示したい文字][key]の形式で記述する。文章を読む流れを妨げずにリンクを挿入できる。
Markdown
[0]: http://www.yahoo.co.jp "ヤフー" [1]: http://www.google.jp "グーグル" [2]: http://www.hatena.ne.jp "はてな" [Yahoo][0] [Google][1] [はてな][2]
HTML
<a href="http://www.yahoo.co.jp" title="ヤフー">Yahoo</a> <a href="http://www.google.jp" title="グーグル">Google</a> <a href="http://www.hatena.ne.jp" title="はてな">はてな</a>
画像
で画像を表示する。
(url)の部分には[0]のように外部参照リンクも使用可能。
Markdown
HTML
<img src="hoge.jpg" alt="画像です">
[](画像クリックでのURL)で画像リンク。
Markdown
[](http://www.yahoo.co.jp)
HTML
<a href="http://www.yahoo.co.jp">
<img src="hoge.jpg" alt="画像です">
</a>
引用
文頭に>を置くと引用になります。
Markdown
>Wikipediaより引用 >Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 >「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、 >ジョン・グル―バー（John Gruber）により作成された。アーロン・スワーツ（Aaron Swartz）も大きな貢献をしている。 >Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。
HTML
<blockquote><p>Wikipediaより引用<br> Markdown は、文書を記述するための軽量マークアップ言語のひとつである。 「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、 ジョン・グル―バー（John Gruber）により作成された。アーロン・スワーツ（Aaron Swartz）も大きな貢献をしている。 Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習から着想を得ている。</p></blockquote>
引用をネストすることも可能です
１つめの引用
2つめの引用
３つめの引用
表
オリジナルのMarkdownにはない機能。
1行目がヘッダー、2行目に区切りの - を入れる。
2行目の:で左寄せ、センタリング、右寄せを指定できる。
両端の|は省略可能。
スペースとかタブで余白を整形する必要はない。
Markdown
|着順 |馬名 |タイム|着差 | |-----------:|:----------------------------------------|:----:|------| |1 |スペシャルウィーク |1.58.0| | |2 |ステイゴールド |1.58.1|クビ | |3|エアジハード|1.58.2|3/4| |4|スティンガー|1.58.3|1/2| |5|セイウンスカイ|1.58.3|クビ|
表示結果
| 着順 | 馬名 | タイム | 着差 |
|---|---|---|---|
| 1 | スペシャルウィーク | 1.58.0 | |
| 2 | ステイゴールド | 1.58.1 | クビ |
| 3 | エアジハード | 1.58.2 | 3/4 |
| 4 | スティンガー | 1.58.3 | 1/2 |
| 5 | セイウンスカイ | 1.58.3 | クビ |
コード
バッククオート３つで挟む。１つめの```の直後に言語を指定すると Syntax Highlight表示される。
使える言語はこれだと思ったけど違うみたい。
はてな記法で使えるやつは使えると思っていいのかな、謎。
Markdown
````ruby
# The Greeter class
class Greeter
def initialize(name)
@name = name.capitalize
end
def salute
puts "Hello #{@name}!"
end
end
# Create a new object
g = Greeter.new("world")
# Output "Hello World!"
g.salute
````
結果
# The Greeter class class Greeter def initialize(name) @name = name.capitalize end def salute puts "Hello #{@name}!" end end # Create a new object g = Greeter.new("world") # Output "Hello World!" g.salute
バッククオートで囲むとputs "Hello World"のようにインラインに展開されます。
出来ないことは直接HTML書けばよい。
