読者です 読者をやめる 読者になる 読者になる

技術メモのかけら

内容はもとより調べたことすら忘れてしまうので個人的な技術メモを残しているブログです。Qiitaの記事にするほどでもない細かいネタを投稿します。

はてなブログで使える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

吾輩 は猫である。  ←半角スペース2こ
名前はまだ無い。

どこで生れたかとんと見当がつかぬ。  ←半角スペース2こ
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

出力結果


吾輩 は猫である。
名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。


HTML

<p>吾輩 は猫である。<br>
名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。<br>
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

段落内で改行したい場合は行末を半角スペース2つ以上で終わらせる必要がある。 以前は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. これはリスト
  2. これもリスト
  3. これもリスト
    1. これはインデントしたリスト
    2. これはインデントしたリスト
    3. これはインデントしたリスト

行の順番で勝手にナンバリングされるので、後で変更する可能性を考えてすべて 1. としてもOK。

HTML

<ol>
<li>これはリスト</li>
<li>これもリスト</li>
<li>これもリスト

<ol>
<li>これはインデントしたリスト</li>
<li>これはインデントしたリスト</li>
<li>これはインデントしたリスト</li>
</ol>
</li>
</ol>

水平線

3つ以上の * - _ だけの行は罫線になる。

Markdown

***
- - -
_ _           _

HTML

<hr>
<hr>
<hr>

リンク

自動リンク

<>でURLかメールアドレスを囲むだけ。

http://www.yahoo.co.jp

hoge@detarame.com

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="&#x6D;a&#105;&#x6C;&#116;&#111;:&#104;&#x6F;g&#101;&#64;&#x64;e&#116;&#97;&#114;&#x61;&#x6D;&#x65;&#46;&#x63;&#111;&#x6D;">&#104;&#x6F;g&#101;&#64;&#x64;e&#116;&#97;&#114;&#x61;&#x6D;&#x65;&#46;&#x63;&#111;&#x6D;</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>

画像

![alt](url)で画像を表示する。 (url)の部分には[0]のように外部参照リンクも使用可能。

Markdown

![画像です](hoge.jpg)

HTML

<img src="hoge.jpg" alt="画像です">

[![alt](画像のURL)](画像クリックでのURL)で画像リンク。

Markdown

[![画像です](hoge.jpg)](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>

引用をネストすることも可能です

1つめの引用

2つめの引用

3つめの引用

オリジナルの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 クビ

コード

バッククオート3つで挟む。1つめの```の直後に言語を指定すると 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書けばよい。