hero-rinのブログ

某会社で某システムの運用、開発をやっているただのおじさん

トップ > 言語 > はてなで使えるMarkdown記法

はてなで使えるMarkdown記法

言語

Markdownチートシート

"はてな"初心者の自分はずっと"編集モード"を"見たままモード"いわゆるデフォルトってヤツで利用してきました。というか"モード"なんてあるなんて知らなくて、そうゆうもんだと思って書いてました。ただ、前回の記事を書いている中でどうしてもテーブルタグが書きたくて（結局前回の記事は諦めたんですが）、それプラス他にもちょこちょこ書き辛さを感じていて他の人どうしてるんだろうとしらべてみたらあったんです"Markdownモード"！設定まわりはちゃんと調べておくものなのですね。(｡>﹏<｡) ってことで今回は、はてなで使えるMarkdownのチートシートでも残しておこうと思います。まずは！

Markdown（マークダウン）とは

文章が記述するための軽量MarkUp（マークアップ）言語です。downなのにupとは禅問答みたいですが"Markdown"という名前のMarkUp言語ってことですね。自分の中の解釈はWeb上で文章を書いている人が「HTMLとか書いてらんないよ！」という不満ニーズに答えたHTMLコンバータみたいな言語だと思ってます。Markdown記法で書くとHTMLに変換してくれるってやつです。いつの間にかいろんな所に広がりまくって文章書く系のToolやサイトでは当たり前の存在になってます。

Markdownチート一覧

さて本題です。Markdownは広がりまくったのはいいんですが、Toolやサイトによって若干使用できない記法があったりするようなので、今回は"はてな"で使える記法をまとめていきたいと思います。（初回ですべて拾えきれる感じが全くしないので、書けていない記法が見つかれば随時更新していきます。）

1. 見出し

# 見出し <h1></h1>と同じ  
## 見出し <h2></h2>と同じ
### 見出し <h3></h3>と同じ
#### 見出し <h4></h4>と同じ
##### 見出し <h5></h5>と同じ
###### 見出し <h6></h6>と同じ

"はてな"では<h1>から<h6>まで使用可能でした。後は#を増やしても<h6>固定のようです。

【"はてな"での見た目】

見出し１

見出し２

見出し３

見出し４

見出し５
見出し６

2. 改行

改行したい場所で[半角スペース][半角スペース]（半角スペースを２つ入れる）

文章[半角スペース][半角スペース]は<br>と同じ


【"はてな"での見た目】

改行したいところで半角スペースを
２つ入れる！

3. 段落

段落を分けたい部分で  
[空行]  
を入れる

文章[半角スペース]は<p></p>と同じ


【"はてな"での見た目】

段落を分けたい部分で

[空行]を入れる！

4. 箇条書きリスト

- リスト１
- リスト２
  - リスト２_１  半角スペース２つ or ４つ


【"はてな"での見た目】

5. 番号付きリスト

1. リスト１
1. リスト２
    1. リスト２_１  半角スペース４つ


【"はてな"での見た目】

  1. リスト１
  2. リスト２
    1. リスト２_１ 半角スペース４つ

6. リンク

基本リンク
[はてなトップ１](http://www.hatena.ne.jp "hatena")   
[はてなトップ２](http://www.hatena.ne.jp)   ()内のtitle属性は省略可能

内部リンクも書けるはずなんですが、"はてな"だと上手く動かない？


【"はてな"での見た目】

はてなトップ１
はてなトップ２


基本リンク（応用編）
【応用】
[はてなトップ１][1]
[1]: http://www.hatena.ne.jp

【応用(ID省略)】
[はてなトップ２][]
[はてなトップ２]: http://www.hatena.ne.jp

【応用("[]"自体も省略)】
[はてなトップ３]
[はてなトップ３]: http://www.hatena.ne.jp


【"はてな"での見た目】

はてなトップ１
はてなトップ２
はてなトップ３

[リンク名][ID]
[ID]: URL "title属性"
"ID"は、英数半角全角なんでもいけそうです。


基本リンク（応用編）の使用例

下のように書くことでURL一箇所書けばいい寸法です。

[これ][はてなトップ]と[この][はてなトップ]リンクは同じですよ！

[はてなトップ]: http://www.hatena.ne.jp "hatena"


【"はてな"での見た目】

これとこのリンクは同じですよ！


画像埋め込み
![アイコン](http://www.hatena.ne.jp/images/favicon/blog.png "icon")   
![アイコン](http://www.hatena.ne.jp/images/favicon/blog.png)    ()内のtitle属性は省略可能

リンクとほぼ同じ先頭に"!"を付けることで画像を埋め込むことができるようです。


【"はてな"での見た目】

アイコン
アイコン


画像埋め込み（応用編）
![アイコン][icon]
[icon]: http://www.hatena.ne.jp/images/favicon/blog.png


【"はてな"での見た目】

アイコン

リンク＋画像埋め込み
[![アイコン](http://www.hatena.ne.jp/images/favicon/blog.png)](http://www.hatena.ne.jp)


【"はてな"での見た目】

アイコン


リンク＋画像埋め込み（応用編）
[![アイコン](http://www.hatena.ne.jp/images/favicon/blog.png)][icon]
[icon]: http://www.hatena.ne.jp


【"はてな"での見た目】

アイコン

リンク＋画像埋め込み（応用編）の使用例
[![アイコン1](http://www.hatena.ne.jp/images/favicon/blog.png)][はてなトップ]
と
[![アイコン2](http://www.hatena.ne.jp/images/hatenaportal/portal/2012/appicon-blog@2x.png)][はてなトップ]リンクは同じですよ！

[はてなトップ]: http://www.hatena.ne.jp "hatena"


【"はてな"での見た目】

アイコン1 と アイコン2 リンクは同じですよ！

7. 引用

> 引用です
>
>> ネストしている引用です
>


【"はてな"での見た目】

引用です

ネストしている引用です

8. 目次

目次はないみたいなので、素直に下の"はてな"で用意している記法を使った方がいいみたいです。

 [:contents]

9. 脚注

Markdown記法で書くと
こんな書き方があるなんて[^1]

[^1]: ここに脚注を書きます


【"はてな"での見た目】

こんな書き方があるなんて1


"はてな"で用意されている記方

素直に"はてな"で用意している下の記法を使った方がきれいな感じがしました。

こんな書き方があるなんて((ここに脚注を書きます))


【"はてな"での見た目】

こんな書き方があるなんて*1

10. 太字（強調）

**太字**
__太字__


【"はてな"での見た目】

太字

11. 斜体

*斜体*
_斜体_


【"はてな"での見た目】

斜体

12. 太字＆斜体

***太字＆斜体***
___太字＆斜体___


【"はてな"での見た目】

太字＆斜体

13. 打消（打ち消し線）

~~取り消し~~


【"はてな"での見た目】

取り消し

14. アンダーライン

ないっぽい？ちょっと意外でした。 <u></u>で代用

15. 水平線

---
***
___


【"はてな"での見た目】

16. コードブロック

```sql
select * from hoge where fuga = 'piyo';
```


【"はてな"での見た目】

sql
select * from hoge where fuga = 'piyo';

その他（例えばpython）

python
def hello_world():
    print('Hello world!')

hello_world()

どうもソースファイルを表示する機能(```sql:hoge.sqlみたいに書くと"hoge.sql"が表示される)は使えないみたいでした。

help.hatenablog.com

17. インラインコード

`select * from hoge;`


【"はてな"での見た目】

select * from hoge;

17. テーブル

|指定無し|左寄せ|中央寄せ|右寄せ|
|---|:---|:---:|---:|
|100|200|300|400|


【"はてな"での見た目】

指定無し 左寄せ 中央寄せ 右寄せ
100 200 300 400


省略形

一部省略しても表示させることが可能です。

指定無し|左寄せ|中央寄せ|右寄せ|
-|:-|:-:|-:|
100|200|300|400


【"はてな"での見た目】

指定無し 左寄せ 中央寄せ 右寄せ
100 200 300 400


18. チェックボックス

普通に使えませんでした。 (下のようになっちゃいました。)

  • [ ] チェック１
  • [x] チェック２


19. エスケープ（特殊文字の機能を無効）

\#見出し
\_アンダースコアの表示方法\_

"\"を特殊記号の直前に置くことで特殊記号の機能を無効にします。


【"はてな"での見た目】

#見出し
_アンダースコアの表示方法_

20. おまけ（便利なタグなど）

折りたたみ
<details>
  <summary>ここに折りたたんだ時に表示される文字を入れます。</summary>
  ここに折りたたまれて非表示になっている文字を入れます。
</details>


【"はてな"での見た目】

ここに折りたたんだ時に表示される文字を入れます。 ここに折りたたまれて非表示になっている文字を入れます。


下のような書き方が便利らしい

python サンプルコード 

def hello_world():
    print('Hello world!')

hello_world()


数式
下付き
X<sub>2</sub>


【"はてな"での見た目】

X2

上付き
X<sup>2</sup>


【"はてな"での見た目】

X2


pre記法
先頭に[半角スペース][半角スペース][半角スペース][半角スペース]（[半角スペース]を４つ以上入れる）
    <html>
        <head>   
            <title>サンプル</title>
        </head>
        <body>
            <p>HTMLのサンプルですね！</p>
        </body>
    </html>


【"はてな"での見た目】

<html>
    <head>   
        <title>サンプル</title>
    </head>
    <body>
        <p>HTMLのサンプルですね！</p>
    </body>
</html>

限定的なのかと思ってたんですが、結構普通に使えるっぽいですね。これと"はてな"で用意されている機能（"目次"とか"リンク挿入の埋め込み機能"とか）を併用すればいろいろ書きやすくなりそうです。さて次回はAWSのカテゴリ記事に戻りたいと思います。

今回はここまで！

  1. ここに脚注を書きます↩

*1:ここに脚注を書きます