Markdown内のHTML
Markdownの構文はHTMLで書き換えできます。
ブロックレベルのタグ
- div
- table
- pre
- p
- li
等々。
実際に使ってみると、こんな感じになります。
<table>
<tr>
<th>Foo</th>
<th>HOGE</th>
<th>*HOGE*</th>
</tr>
<tr>
<td>Foo</td>
<td>HOGE</td>
<td>*HOGE*</td>
</tr>
</table>
| Foo | HOGE | *HOGE* |
|---|---|---|
| Foo | HOGE | *HOGE* |
ただし、ブロックレベルのタグだと、タグ内ではMarkdownスタイルは使えません。
スパンレベルのタグ
- span
- cite
- del
- img
- a
<cite>**Hello World**</cite>
Hello World
スパンレベルのタグ内なら、Markdownスタイルも使えちゃいます。
特殊文字のエスケープ
- & : &
- < : <
HTMLならリンクに含まれた&
<a href="http://images.google.com/images?num=30&q=larry+bird">Link</a>
著作権記号
&copy;
©
©
タグ
<a>hogehoge</a>
<a>hogehoge</a>
hogehoge
Markdown内のブロック要素
段落・改行
段落の定義は 「1行以上の連続したテキスト」
改行するには、1行あける必要があります。
つまり 「2個改行」 を挟めばいいわけです。
ただし、Qiitaだと、1個で改行できちゃいました。
見出し
見出しの書き方は2種類あります。
Setext形式
This is an H1
=============
This is an H2
-------------
Atx形式
# This is an H1
## This is an H2
### This is an H3
#の数が増えるほど、小さい見出しになります。
#を最後に付け加えれば、見出しを綴じることもできます。
引用
> 引用したい文
引用したい文
- 複数の
>を並べると入れ子に - Markdown要素が使用可
実際に試してみるとこんな感じになりました。
> This is a blockquote with two paragraphs.
> # number
> > 1. one
> > 2. two
> > 3. three
This is a blockquote with two paragraphs.
number
- one
- two
- three
リスト
番号なしリスト
* + - をリストマーカーに使える。
* アスタリスク
+ プラス
- ハイフン
- アスタリスク
- プラス
- ハイフン
番号付きリスト
Markdown
1. one
2. two
3. three
- one
- two
- three
実は1つめの番号以外は、順番と違っていても、問題ないみたいです。
これでも同じ表示になりました。
1. one
5. two
2. three
- one
- two
- three
HTML
<ol>
<li>one
<li>two
<li>three
</ol>
- one
- two
- three
また、リストの要素に
- 引用を入れるなら、1インデント。
- コードを入れるなら、2インデント。
* A list item with a blockquote:
> This is a blockquote
> inside a list item.
* A list item with a code block:
<code goes here>
表示するとこんな感じ。
- A list item with a blockquote:
This is a blockquote
inside a list item.
-
A list item with a code block:
<code goes here>
数字.をそのまま表示する場合は、バックスラッシュを挟んで数字\.とすればオッケーです。
コードブロック
各行を1つのタブでインデントすると、次のようなソースコードのブロックを作れます。
こんな感じ
# 全部の文字がそのまま表示される
&
HTMLだとこれに対応します。
<pre><code>
こんな感じ
# 全部の文字がそのまま表示される
&
</code></pre>
HTMLだと&；等が&として解釈されちゃいます。
一方、Markdownのコードブロックだと、その辺の文字をHTMLエンティティに勝手に変換してくれるので便利！
長いコードなら、全部インデントするの面倒ですし``` でコード囲った方が楽そうです。
しかし1・2行のコードなら、インデントした方が楽できるかもしれません。
水平線
水平線<hr />(HTML)ってこんなもの↓
これをMarkdownだと*、-、_のどれかを3つ並べるだけで書けます。
Markdown内のスパン要素
リンク
[リンクの表示名](URL "タイトル")
ただし、タイトルはリンクにカーソルを合わせたときに表示される名前。
タイトルがなければ、URLが表示されます。
This is [an example](http://example.com/ "Title") inline link.
This is an example inline link.
[リンクの表示名][ID]
とすると、[ID]に設定したURLに飛ぶリンクが作れる。
[ID]の設定は
[ID名]:URL "タイトル"
でできます。
""は''、()でも代用できます。
またこの記述は実際には表示されないので、ご心配いりません。
[id]: http://example.com/ "Optional Title Here"
This is [an example][id] reference-style link.
This is an example reference-style link.
「ID名」を「リンクの表示名」にすれば、[ID]の中を省略可能です。
I get 10 times more traffic from Google than from
Yahoo or MSN.
強調
_ * で文字を挟むと、強調できます。
1個なら 斜め に
*moji*
moji
2個なら 太字 に
**moji**
moji
記号を表示したいなら、\を付けてエスケープしておきましょう。
\*\*moji\*\*
**moji**
インラインのコード
`コード`
とすると、段落内でソースコードをそのまま表示できます。
Use the `printf()` function.
Use the printf() function.
コード内の`をそのまま表示するには、
コードを囲う記号を``に変えればオッケーです。
Use the `` `printf()` `` function.
Use the `printf()` function.
画像
![画像のタイトル][ID名]
リンク同様、こうすることでIDに設定したURLにある画像とタイトルを表示できます。
[id2]:https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google"
![image.png][id2]
自動リンク
メールアドレスやURLを<>で囲えば、勝手にリンクを作ってくれます。
<hogehoge@hoge.com>
<http://example.com/>