Markdown

Markdown記法一覧

markdownでmarkdownの書き方を記述しました。

Markdownとは

Markdown - Wikipedia
Markdown(マークダウン)は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア(コンバータ)も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

🎁 Block elements

💎 Paragraphs and Line Breaks - 改行

example.md
1行目(スペースを2つ入れる)
2行目

🎉 結果
1行目

2行目

💎 Headers - 見出し

example.md
# This is an H1
## This is an H2
###### This is an H6

🎉 結果

This is an H1


This is an H2


This is an H6

💎 Blockquotes - 引用

example.md
> "引用引用引用引用
引用引用"
>引用本文引用本文
>>入れ子

🎉 結果

>によって引用をすることができます

ダブルクォーテーション内は途中で改行されません

💎 Lists - リスト

Disc

example.md
* リスト1
    * リスト1-2  
* リスト2  

🎉 結果
* リスト表示のルール
* タブを入れることで
* 階層表示が可能です

Decimal

example.md
1. リスト1-1
    2. リスト1-2  
2. リスト2  

🎉 結果
1. リスト1
1. リスト1-1
2. リスト1-2

2. リスト2

Definition

example.md
<dl>
  <dt>オレオ</dt>
  <dd>クッキー&クリーム</dd>
  <dt>リッツ</dt>
  <dd>プレーンクラッカー</dd>
</dl> 

🎉 結果


オレオ

クッキー&クリーム

リッツ

プレーンクラッカー

Checkbox

example.md
- [ ] リスト1
- [x] リスト2

🎉 結果

  • リスト1
  • リスト2

💎 Horizontal Rules - 水平線

3つ以上のハイフン、アスタリスク、アンダースコアをならべる。

example.md
    * * *  
    ***  
    *****  
    - - -  
    ———————————————————

🎉 結果


🎁 Span Elements

💎 Links - リンク

自動リンク

example.md
<http://qiita.com>

🎉 結果
http://qiita.com

インライン記法

example.md
[Qiita](http://qiita.com)
[Qiita](http://qiita.com "Qiita")

🎉 結果
Qiita
Qiita (タイトル付き)

💎 Emphasis - 強調

example.md
*強調*
**強調**
***強調***

🎉 結果

アスタリスク 書体 表示
1つ イタリック体 サンプル
2つ Bold体 サンプル
3つ イタリック&Bold体 サンプル

アスタリスク(*)だけでなくアンダースコア(_)でも同様の機能が使えます

💎 画像

example.md
![ダミー画像](http://placehold.it/100)
![ダミー画像](http://placehold.it/100 "ダミー画像")

🎉 結果
ダミー画像

ダミー画像 (タイトル付き)

💎 打ち消し

example.md
~~打ち消し~~

🎉 結果
打ち消し打ち消し打ち消し打ち消し

💎 注釈

example.md
    本文本文本文\[^注釈]
    \[^注釈]:注釈テキスト注釈テキスト注釈テキスト

🎉 結果
現実と理想は良く見れば隣り合わせ、いつだって自分次第でどっちにも手が届く。1

🎁 Code

💎 コード表示

インライン

example.md
`$hoge = 1`
`.md`

🎉 結果
$hoge = 1.md

シンタックスハイライト

記法

example.md
```html:sample
   <div class="radioWave">
      <p>迷いの中あてなく見上げた空彩る星たちが</p>
      <p>嘘みたいに晴れた朝に繋がることを教えてくれた</p>
   </div>
```(

🎉 結果

sample
<div class="radioWave">
  <p>迷いの中あてなく見上げた空彩る星たちが</p>
  <p>嘘みたいに晴れた朝に繋がることを教えてくれた</p>
</div>

🎁 Extra

💎 テーブル記法

example.md
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| This       |        This |     This     |
| column     |      column |    column    |
| will       |        will |     will     |
| be         |          be |      be      |
| left       |       right |    center    |
| aligned    |     aligned |   aligned    |

🎉 結果

左寄せ 右寄せ 中央
コロンの位置で テキストの位置を 指定できます
コード記法や 強調表示も 使用可能です
要素の前後には 必ずスペースを 入れましょう

🔗 参考にしたサイト等

🔗 この辺も参考になるかも?


  1. イロドリセカイ(でんぱ組.inc)