節約テクノロジ >

Markdownクックシート(よく使うサンプル集)

MarkdownはHTMLに変換する事を前提に設計されたマークアップ言語です。 HTMLよりも簡潔に記述できること、変換前の状態でも可読性に優れている事が特徴です。

ここではMarkdown記法の中でも特によく使う機能の実例集サンプルを記述します。

目次

  1. ヘッダ
  2. 箇条書き
  3. 番号付き箇条書き
  4. 単純なリンク
  5. 自動リンク
  6. 単純なイメージ画像
  7. コードブロック
  8. 罫線
  9. イタリックと強調と取り消し線
  10. 表(拡張記法)
  11. 参考リンク

ヘッダ

#hello
##world

↓

<h1>hello</h1>
<h2>world</h2>

先頭の#の数がhタグの番号となります。

箇条書き

* hello
* world

↓

<ul>
 <li>hello</li>
 <li>world</li>
</ul>

先頭に*もしくは+や-、その後にスペースをいれることで箇条書きとなります。

番号付き箇条書き

1. hello
2. world

↓

<ol>
 <li>hello</li>
 <li>world</li>
</ol>

先頭に数値とピリオド、そしてスペースを入れる事で番号付き箇条書きとなります。Markdownの番号は出力されたHTMLでは無視されます。

単純なリンク

[hello](http://hello.com)
[world](/world/index.html)
[withtitle](index.html "withtitle")

↓

<a href="http://hello.com">hello</a>
<a href="/world/index.html">world</a>
<a href="index.html" title="withtitle">withtitle</a><

リンクは上記の直接リンクの他に参照リンクという形式があります。あまり使わないのでここでは割愛します。

自動リンク

<http://hello.com>

↓

<a href="http://hello.com">http://hello.com</a>

単純なイメージ画像

![](http://daringfireball.net/graphics/logos/)
![world](/world.png)
![withtitle](sample.gif "withtitle")

↓

<img src="http://hello.com/hello.jpg" alt="">
<img src="/world.png" alt="world">
<img src="sample.gif" alt="withtitle" title="withtitle">

画像はリンクと同じく上記の直接指定の他に参照リンクという形式があります。あまり使わないので省略します。

コードブロック

console.log('hello')
console.log('world')

```
console.log('hello')
console.log('world')
```

↓

<pre><code>console.log('hello')
console.log('world')</code></pre>

先頭に4つ以上のスペース、または一つ以上のタブを挿入します。また、バッククォートを3つつなげたもので段落を囲っても同様です。

`インラインコード` の様にバッククォートを使ってインラインコードも記述できます。バッククォートの数は任意です。

罫線

***
---
* * *
-----

↓

<hr>
<hr>
<hr>
<hr>

3つ以上の*や-が並ぶとHRタグに変換されます。スペースが入っていても構いません。

イタリックと強調と取り消し線

*hoge*
**fuga**
***moga***
~~mogamoga~~

↓

<em>hoge</em>
<strong>fuga</strong>
<strong><em>moga</em></strong>
<del>mogamoga</del>

アスタリスクの代わりに_アンダーバーでも同様です。

表(拡張記法)

|Hello|World|
|-----|-----|
|col1|col2|
|col3|col4|

Hello|World
-|-
col1|col2
col3|col4

↓

<table>
 <thead><tr><th>Hello</th>th>World</th></tr></thead>
 <tbody>
  <tr><td>col1</td><td>col2</td></tr>
  <tr><td>col3</td><td>col4</td></tr>
 </tbody>
 </table>
<table>

Markdownでテーブルの記述は拡張記法ですがよく使うので紹介します。node.jsだとmarkedというnpmモジュールがこれらに対応しています。上記テーブル記述はどちらも同じ結果になります。

参考リンク

上記の例はほんの一例です。Markdownは多様な書き方や機能があります。下記外部リンクにさらに詳しい解説があります。

この記事を見た人がよく読んでいる記事

節約テクノロジ >

トップページ

節約テクノロジ > Markdownクックシート(よく使うサンプル集)