たまねぎの中核
Web、Linux勉強中

Markdown記法まとめ

Markdown記法まとめ

Markdown記法 を使用することで、HTML文書 の作成コストを下げることができます。 本記事では Markdown記法 の中でも、一般的に使用頻度が高いと思われる要素について記載します。

標準的な Markdown

見出し

行頭に # 文字列 と記述することで見出しを表すことができます。 # の数で見出しのレベルが変わります。

# 見出し1
## 見出し2
### 見出し3

上記記述は以下のように変換されます。

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

また、見出し文字列となる文字列の次の行に 1文字以上の = あるいは - を記述することで見出しを表すこともできます。

見出し1
==========
見出し2
----------

上記記述は以下のように変換されます。

<h1>見出し1</h1>
<h2>見出し2</h2>

段落

空行は段落の区切りを意味します。

吾輩わがはいは猫である。名前はまだ無い。

どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。

上記記述は以下のように変換されます。

<p>吾輩わがはいは猫である。名前はまだ無い。</p>
<p>どこで生れたかとんと見当けんとうがつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>

改行

行末に2つの半角スペースで改行を表すことができます。

(半角スペース×2⇒)  

上記記述は以下のように変換されます。

(半角スペース×2⇒)<br />

リンク

<URL> または [文字列](URL) と記述することでリンクを表すことができます。

<https://google.co.jp>
[Google](https://google.co.jp)

上記記述は以下のように変換されます。

<a href="https://google.co.jp">https://google.co.jp</a>
<a href="https://google.co.jp">Google</a>

また、[文字列][文字列]: URL title文字列 を組み合わせることでも リンクを表すことができます。 この書き方は同じリンクを使いまわす場合に便利です。

分からないことがあれば、[Google] で検索してみましょう。
[Google] はとても便利です。

[Google]: https://google.co.jp "Googleで検索"

上記記述は以下のように変換されます。

分からないことがあれば、
<a href="https://google.co.jp" title="Googleで検索">Google</a>
で検索してみましょう。
<a href="https://google.co.jp" title="Googleで検索">Google</a>
はとても便利です。

画像

![alt文字列](URL) と記述することで画像を表すことができます。

![タイトル](http://formicaweb.net/title.jpg)

上記記述は以下のように変換されます。

<img src="http://formicaweb.net/title.jpg" alt="タイトル" />

リスト(箇条書き)

行頭に - 文字列 または + 文字列 または * 文字列 と記述することで リスト(箇条書き)を表すことができます。 また、半角スペースを使って階層作ることができます。

- リスト1
- リスト2
    - リスト2-1
    - リスト2-2
- リスト3

上記記述は以下のように変換されます。

<ul>
  <li>リスト1</li>
  <li>リスト2
    <ul>
      <li>リスト2-1</li>
      <li>リスト2-2</li>
    </ul>
  </li>
  <li>リスト3</li>
</ul>

番号付きリスト

行頭に 1. 文字列 と記述することで番号付きリストを表すことができます。 1 だけでなく 2~9 までの数字も使用することができます。 また、半角スペースを使って階層作ることができます。

1. リスト1
2. リスト2
    1. リスト2-1
    2. リスト2-2
3. リスト3

上記記述は以下のように変換されます。

<ol>
  <li>リスト1</li>
  <li>リスト2
    <ol>
      <li>リスト2-1</li>
      <li>リスト2-2</li>
    </ol>
  </li>
  <li>リスト3</li>
</ol>

コード

行頭に4つ以上の半角スペースを記述することで コードを表すことができます。

以下PHPコード

    namespace markdown\block;
    
    class HeadLine {
        protected $text = null;

上記記述は以下のように変換されます。

以下PHPコード

    <pre><code>
    namespace markdown\block;
    
    class HeadLine {
    protected $text = null;
    </code></pre>

また、行頭に ``` を記述し、 文字列を囲むことでもコードを表すことができます。

```
namespace markdown\block;

class HeadLine {
    protected $text = null;
```

インラインコード

文字列を ` で囲むことでコードをインライン要素として表すことができます。

HTML の本体は `<body>` で囲みます。

上記記述は以下のように変換されます。

HTML の本体は <code>&lt;body&gt;</code> で囲みます。

引用

行頭に > 文字列と記述することで引用を表すことができます。

> 夏目 漱石(なつめ そうせき、1867年2月9日(慶応3年1月5日) - 1916年(大正5年)12月9日)は、
> 日本の小説家、評論家、英文学者。本名、夏目 金之助(なつめ きんのすけ)。
> 江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。俳号は愚陀仏。

上記記述は以下のように変換されます。

<blockquote>
<p>夏目 漱石(なつめ そうせき、1867年2月9日(慶応3年1月5日) - 1916年(大正5年)12月9日)は、
日本の小説家、評論家、英文学者。本名、夏目 金之助(なつめ きんのすけ)。
江戸の牛込馬場下横町(現在の東京都新宿区喜久井町)出身。俳号は愚陀仏。</p>
</blockquote>

強調

文字列を * または _ で囲むことで強調を表すことができます。

これは*強調*です。
これは**さらに強い強調**です。

上記記述は以下のように変換されます。

これは<em>強調</em>です。
これは<strong>さらに強い強調</strong>です。

水平線

1行を半角スペースと、3文字以上の - または * または _ で構成することで、 水平線を表すことができます。

---

- - - - -

***

___

上記記述は以下のように変換されます。

<hr />

<hr />

<hr />

<hr />

Markdown の方言

コード

行頭に ```文字列 または ~~~文字列 と記述し、 文字列を囲むことでコードの種類(class)を表すことができます。

```php
namespace markdown\block;

class HeadLine {
    protected $text = null;
```

上記記述は以下のように変換されます。

<pre><code class="php">
namespace markdown\block;

class HeadLine {
    protected $text = null;
</code></pre>

Markdown の種類によっては class名に language などの接頭辞が付与されることもあるようです。

テーブル

|- を使用してテーブルを表すことができます。

列名1  | 列名2
------ | ------
セル1  | セル2
セル1  | セル2

上記記述は以下のように変換されます。

<table>
  <thead>
    <tr><th>列名1</th><th>列名2</th></tr>
  </thead>
  <tbody>
    <tr><td>セル1</td><td>セル2</td></tr>
    <tr><td>セル1</td><td>セル2</td></tr>
  </tbody>
</table>