9.9 KiB
| contributors | translators | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
|
Markdownは2004年にジョン グラバー(John Gruber)によって作られました。 HTMLへの変換が容易な書きやすくかつ読みやすいマークアップ言語として開発されました。 今ではHTMLの他に様々なファイル形式へ変換できます。
Markdownは構文解析の実装によって様々な派生があるマークアップ言語として知られています。 このチュートリアルでは様々な実装での共通の構文であるか特定の実装でしか使えないものなのかを極力明記しています。
HTML要素
MarkdownはHTMLの上位互換言語として開発されたのでほとんどのHTMLはMarkdownでも使えます。
<!--そのため、コメント要素などのHTML要素を使え、
Markdownの構文解析ソフトはこれらHTMLに何も手を加えません。
ただ、要素内のコンテンツも手を加えないので、
要素内でのMarkdown記法は使えません。-->
見出し
HTMLの<h1>から<h6>に相当する見出しが作れます。
ハッシュ(#)の数によって見出しのサイズを変えることができます。
# これが <h1>
## これが <h2>
### これが <h3>
#### これが <h4>
##### これが <h5>
###### これが <h6>
h1とh2を表す別の記法もあります。
これが h1
========
これが h2
--------
文字の簡単なスタイリング
Markdownを使えば簡単に太字にしたり、イタリック体にできます。
*文字をイタリック体にする。*
_これもイタリック体になる。_
**文字を太字にする。**
__これも太字になる。__
***文字を同時にイタリック体と太字にする。***
**_これも、_**
*__これも同じ。__*
GitHub版Markdownでは取り消し線を引くことができます。
~~取り消し線と共にこれが表示されます。~~
段落
段落は1行以上の連続した行に記述された文章で、1行以上の改行で区切られます。
これが段落です。これだけでもスゴくない?
ここは第2段落です。
ここも第2段落だぜ!
そしてここは第3段落だ!
段落の途中で<br />タグを入れる時は2つ以上の半角スペースを段落末に入れることで
新たな段落を始めれます。
これはスペース2つで終わっています。(ハイライトして見てください。)
<br /> が上にあります!
ブロッククォート(引用句)は文の前に ">" を書けば簡単にできます。
> これが引用句です。手動
> で改行して `>` を各行に書くか、とてつもなく長い文を書いて、表示の際に自動で改行させることもできます。
> `>` で始めていれば、改行してもしなくても同じです。
> 更に、複数段のインデントが
>> ブロッククォート内で使えます。
> よくできてるでしょう？
リスト
順序なしリストはアスタリスク、プラス記号、ハイフンで表します。
* 項目
* 項目
* もう1つの項目
または、
+ 項目
+ 項目
+ また1つの項目
または、
- 項目
- 項目
- 最後の項目
順序付きリストは数字とピリオドで表します。
1. 項目1
2. 項目2
3. 項目3
番号は1から順にしなくてもMarkdownは正しく番号振ってくれますが、 読みにくくなるので推奨しません。
1. 項目1
1. 項目2
1. 項目3
(前の例と同じものが描画される。)
サブリストを使用することができます。
1. 項目1
2. 項目2
3. 項目3
* サブ項目
* サブ項目
4. 項目4
タスクリストも作成できます。これはHTMLのチェックボックスを生成します。
'x' がない物は未チェックのチェックボックスを生成します。
- [ ] 1つ目のタスク
- [ ] 2つ目のタスク
以下はチェックが付いたHTMLチェックボックスを生成します。
- [x] This task has been completed
コード引用
HTMLの<code>を使用したコード引用は半角スペースで4つ空けるか、
タブを1文字を入れます。
これはソースコード
これもソースコード
タブをもう1つ(または半角スペースを追加で4つ)入れればコード引用内で インデントを出力できます。
my_array.each do |item|
puts item
end
バックチック文字 ` を使用すれば文中でインラインコード引用を出力できます。
太郎は`go_to()`関数は何をするのか知らなかったのだ!
GitHub版Markdownでは特別な書き方があります。
```ruby
def hogefuga
puts "Hello world!"
end
```
上記はインデントが必要無く、しかも最初の```の後に
シンタックスハイライトで使用する言語を指定することが出来ます。
横罫
横罫(<hr/>)は間のスペースの有無によらず、3つ以上のアスタリスクまたはハイフンを
挿入することで簡単に引くことができます。
***
---
- - -
****************
リンク
Markdownのよい特徴として、簡単にリンクを入れることができる点があります。 表示するテキストを角括弧 [] 内に記載し、URLを丸括弧 () 内に記載します。
[ここをクリック!](http://test.com/)
丸括弧内にクォーテーションにリンクタイトルを追加できます。
[ここをクリック!](http://test.com/ "Test.com へのリンク。")
相対パスもリンクできます。
[musicへ](/music/)
Markdown は脚注スタイルのリンクを使えます。
[このリンク][link1] から詳細を確認できます。
[更にこのリンク][hogefuga] も見てください！
[link1]: http://test.com/ "Cool!"
[hogefuga]: http://hogefuga.biz/ "Alright!"
タイトルはシングルクォートや括弧内に書いてもよいし、全く書かなくてもよい。 脚注はドキュメントのどこに書いてもよく、参照IDもユニークなものなら何でもよい。
リンクテキストをIDとして使用する暗黙命名が使えます。
[これ][] はリンク.
[これ]: http://thisisalink.com/
が、これはあまり使用されていません。
目次
いくつかのMarkdownの実装では、リストとリンクと見出しを使って目次を作ることができます。
この例では、英文字の見出しを小文字にしたものにハッシュ(#)を接頭し、これをリンクID
として使っています。単語間にスペースがある場合はスペースの代わりにハイフン(-)を使います。
(この時、いくつかの特殊文字は無視されます。)
- [Heading](#heading)
- [Another heading](#another-heading)
- [Chapter](#chapter)
- [Subchapter <h3 />](#subchapter-h3-)
それでも、この機能はすべてのMarkdown実装で同じ様に動作する保証がありません。
画像
画像はリンクと似た構文を持ち、違いは先頭に感嘆符(!)があるところです。
脚注スタイルの書き方もリンクと同じ様に書けます。
![画像のalt属性][myimage]
[myimage]: 画像/への/相対/パス.jpg "ここにタイトルを書きます。"
その他の機能
自動リンク
<http://testwebsite.com/> は
[http://testwebsite.com/](http://testwebsite.com/)
と同じ。
メールアドレスの自動リンク
<hoge@fuga.com>
エスケープ文字
私は *この文節をアスタリスクで囲みたいが、* 斜字体にしたくない、なので
こうします： \*この文節はアスタリスクで囲まれています。\*
キーボードのキー
GitHub版Markdwonでは、<kbd> タグを使用してキーボードのキーを表すことができます。
パソコンがクラッシュした？
<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>
を打ってごらん。
表
表はGitHub版Markdownでしか実装されておらず、少し使いずらいです。
| 行1 | 行2 | 行3 |
| :----- | :------: | -----: |
| 左寄せ | 中央寄せ | 右寄せ |
| ほげ | ふが | ほげ |
下記も同じ様に表示されますが…
行1 | 行2 | 行3
:-- | :-: | --:
なんなんだ、この | ゴミコードは | 止めろ
Markdownlint
Markdownでの執筆を簡略化したり、書式を統一するためにMarkdownlintが
作られました。スタンドアローンのツールはこのレポジトリで配布されていますし、幾つかのIDEのプラグインを
使用できます。これを用れば、Markdownの検証や可読性を確保できます。
関連情報
より詳細な情報はJohn Gruberの公式ブログに書かれた構文解説とAdam Pritchardの偉大なるチートシートを参照してください。
主要な実装については下記を参照してください：