マークダウン

Web のためのコンテンツを書くのは大変な作業です。WYSIWYG エディタはこの作業を軽減するのに役立ちますが、一般的にひどいコードや、さらに悪いことに、醜いウェブページが作成されることになります。

Markdown は HTML を書くためのより良い方法であり、通常付随する複雑さや醜さをすべて取り除いたものです。

主なメリットの一部を紹介。

Markdown は、習得が簡単で、余分な文字も最小限なので、コンテンツを書くのも早いです。
Markdown で書くとエラーが発生する可能性が低くなります。
有効な XHTML を出力します。
コンテンツとビジュアル表示を別々にすることで、サイトの見栄えを損ねることがありません。
好きなテキストエディタや Markdown アプリケーションで書いてください。
Markdown を使うのは楽しい。

Markdown の作者である John Gruber さんは、おっしゃってます。

Markdown 構文の最優先の設計目標は、可能な限り読みやすくすることです。アイデアは Markdown でフォーマットされたドキュメントがタグやフォーマット指示でマークアップされたように見えることなく、そのまま、プレーンテキストとして出力可能であるべきということです。Markdown の構文はいくつかの既存のテキストから HTML へのフィルターから影響を受けていますが、Markdown の構文の唯一最大のインスピレーション源はプレーンテキストのEメールのフォーマットです。
John Gruber

Grav は Markdown と Markdown Extra のサポートを組み込んで配布されています。Markdown Extra の利用には、system.yaml 設定ファイルで Markdown Extra を有効にする必要があります。

早速、Markdown の主な要素と、その結果、HTML がどのようなものになるかを見てみましょう。

このページをブックマークして、将来簡単に参照できるようにしておきましょう。

見出し

h1 ～ h6 までの見出しは、各レベルに # を付けて構成されています。

# h1 Heading
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading

出力結果:

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

HTML ソース:

<h1>h1 Heading</h1>
<h2>h2 Heading</h2>
<h3>h3 Heading</h3>
<h4>h4 Heading</h4>
<h5>h5 Heading</h5>
<h6>h6 Heading</h6>

コメントは HTML にも対応します。

<!--
This is a comment
-->

コメントは表示されません。

水平線のルール

HTML の <hr> 要素は段落レベルの要素間に「テーマの区切り」を作成するためのものです。マークダウンでは、以下のいずれかで <hr> タグを作成することができます。

___: ３個連続するアンダースコア
---: ３個連続するダッシュ
***: ３個連続するアスタリスク

出力結果:

ボディコピー

通常のプレーンテキストとして書かれた本文は、レンダリングされた HTML の中で <p></p> タグで囲まれます。

ボディコピーの例

Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.

出力結果:

<p>Lorem ipsum dolor sit amet, graecis denique ei vel, at duo primis mandamus. Et legere ocurreret pri, animal tacimates complectitur ad cum. Cu eum inermis inimicus efficiendi. Labore officiis his ex, soluta officiis concludaturque ei qui, vide sensibus vim ad.</p>

改行は、スペース 2 つ、リターン 1 つで可能です。

インラインHTML

HTML タグ（クラス付き）が必要な場合は、HTML タグを直接記述することができます。

Paragraph in Markdown.

<div class="class">
    This is <b>HTML</b>
</div>

Paragraph in Markdown.

強調

太字

テキストの一部を強調するために、フォントのウェイトを重くする。

次のスニペットは、太字で表示されます。

**rendered as bold text**

出力結果:

rendered as bold text

HTMLソース:

<strong>rendered as bold text</strong>

イタリック体

斜体で文章の一部を強調する場合。

次の例は、斜体で表示されます。

_rendered as italicized text_

出力結果:

rendered as italicized text

HTML ソース:

<em>rendered as italicized text</em>

取り消し線

GFM (GitHub flavored Markdown) は、取り消し線が引けます。

~~Strike through this text.~~

出力結果:

~~Strike through this text.~~

HTML:

<del>Strike through this text.</del>

ブロックコート

引用表示する場合。

引用したい文章の前に > をつける。

> **Fusion Drive** combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

出力結果:

Fusion Drive combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.

HTML ソース:

<blockquote>
  <p><strong>Fusion Drive</strong> combines a hard drive with a flash storage (solid-state drive) and presents it as a single logical volume with the space of both drives combined.</p>
</blockquote>

ブロッククオートは入れ子にすることもできます。

> Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.
>> Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

出力結果:

Donec massa lacus, ultricies a ullamcorper in, fermentum sed augue.
Nunc augue augue, aliquam non hendrerit ac, commodo vel nisi.

Sed adipiscing elit vitae augue consectetur a gravida nunc vehicula. Donec auctor
odio non est accumsan facilisis. Aliquam id turpis in dolor tincidunt mollis ac eu diam.

お知らせ

ブロック引用構文 >>> を上書きする通知のための古いメカニズムは非推奨とされました。通知は現在、 Markdown Notices と呼ばれる専用のプラグインを介して処理されます。

+ Lorem ipsum dolor sit amet
+ Consectetur adipiscing elit
+ Integer molestie lorem at massa
+ Facilisis in pretium nisl aliquet
+ Nulla volutpat aliquam velit
  - Phasellus iaculis neque
  - Purus sodales ultricies
  - Vestibulum laoreet porttitor sem
  - Ac tristique libero volutpat at
+ Faucibus porta lacus fringilla vel
+ Aenean sit amet erat nunc
+ Eget porttitor lorem

出力結果:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

HTML ソース:

<ul>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit
    <ul>
      <li>Phasellus iaculis neque</li>
      <li>Purus sodales ultricies</li>
      <li>Vestibulum laoreet porttitor sem</li>
      <li>Ac tristique libero volutpat at</li>
    </ul>
  </li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ul>

整列

項目の順序が明示的に重要であるリスト。

1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Facilisis in pretium nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

出力結果:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

HTML ソース:

<ol>
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
  <li>Nulla volutpat aliquam velit</li>
  <li>Faucibus porta lacus fringilla vel</li>
  <li>Aenean sit amet erat nunc</li>
  <li>Eget porttitor lorem</li>
</ol>

TIP: 各番号を 1. にすると、Markdown は各項目に自動的に番号を付けます。例えば、こんな感じです。

1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Integer molestie lorem at massa
1. Facilisis in pretium nisl aliquet
1. Nulla volutpat aliquam velit
1. Faucibus porta lacus fringilla vel
1. Aenean sit amet erat nunc
1. Eget porttitor lorem

出力結果:

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer molestie lorem at massa
Facilisis in pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

コード

インラインコード

文字列を ` で囲む。

In this example, `<section></section>` should be wrapped as **code**.

出力結果:

In this example, <section></section> should be wrapped with code.

HTMLソース:

<p>In this example, <code>&lt;section&gt;&lt;/section&gt;</code> should be wrapped with <strong>code</strong>.</p>

インデントコード

Or indent several lines of code by at least four spaces, as in:

  // Some comments
  line 1 of code
  line 2 of code
  line 3 of code

出力結果:

// Some comments
line 1 of code
line 2 of code
line 3 of code

HTML ソース:

<pre>
  <code>
    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code
  </code>
</pre>

Block code "fences"

Use "fences" ``` to block in multiple lines of code with a language attribute

```
Sample text here...
```

HTML ソース:

<pre language-html>
  <code>Sample text here...</code>
</pre>

シンタックス・ハイライト

GFM, or "GitHub Flavored Markdown" also supports syntax highlighting. To activate it, simply add the file extension of the language you want to use directly after the first code "fence", ```js, and syntax highlighting will automatically be applied in the rendered HTML. For example, to apply syntax highlighting to JavaScript code:

```js
grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};
```

出力結果:

grunt.initConfig({
  assemble: {
    options: {
      assets: 'docs/assets',
      data: 'src/data/*.{json,yml}',
      helpers: 'src/custom-helpers.js',
      partials: ['src/partials/**/*.{hbs,md}']
    },
    pages: {
      options: {
        layout: 'default.hbs'
      },
      files: {
        './': ['src/templates/pages/index.hbs']
      }
    }
  }
};

For syntax highlighting to work, the Highlight plugin needs to be installed and enabled. It in turn utilizes a jquery plugin, so jquery needs to be loaded in your theme too.

テーブル

Tables are created by adding pipes as dividers between each cell, and by adding a line of dashes (also separated by bars) beneath the header. Note that the pipes do not need to be vertically aligned.
テーブルは、各セルの間に仕切りとして '|' を入れ、ヘッダーの下に - を入れることで作成されます。なお、'|' は縦に位置を合わせて並べる必要はない。

| Option | Description |
| ------ | ----------- |
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

出力結果:

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

HTML ソース:

<table>
  <thead>
    <tr>
      <th>Option</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>data</td>
      <td>path to data files to supply the data that will be passed into templates.</td>
    </tr>
    <tr>
      <td>engine</td>
      <td>engine to be used for processing templates. Handlebars is the default.</td>
    </tr>
    <tr>
      <td>ext</td>
      <td>extension to be used for dest files.</td>
    </tr>
  </tbody>
</table>

右寄せのテキスト

見出しの下にある '-' の右側に : を付けると、その列のテキストが右寄せになります。

| Option | Description |
| ------:| -----------:|
| data   | path to data files to supply the data that will be passed into templates. |
| engine | engine to be used for processing templates. Handlebars is the default. |
| ext    | extension to be used for dest files. |

Option	Description
data	path to data files to supply the data that will be passed into templates.
engine	engine to be used for processing templates. Handlebars is the default.
ext	extension to be used for dest files.

リンク

基本的なリンク

[Assemble](https://assemble.io)

出力結果 (hover over the link, there is no tooltip):

Assemble

HTML ソース:

<a href="https://assemble.io">Assemble</a>

タイトルの追加

[Upstage](https://github.com/upstage/ "Visit Upstage!")

出力結果 (hover over the link, there should be a tooltip):

Upstage

HTML ソース:

<a href="https://github.com/upstage/" title="Visit Upstage!">Upstage</a>

アンカー

アンカーを使うと、同じページ内の指定されたアンカーポイントにジャンプすることができます。例えば、、、

# Table of Contents
  * [Chapter 1](#chapter-1)
  * [Chapter 2](#chapter-2)
  * [Chapter 3](#chapter-3)

クリックすると、各 Chapter に移動します。

## Chapter 1 <a id="chapter-1"></a>
Content for chapter one.

## Chapter 2 <a id="chapter-2"></a>
Content for chapter one.

## Chapter 3 <a id="chapter-3"></a>
Content for chapter one.

NOTE アンカータグの配置は任意であることに注意してください。ここでは、邪魔にならないようにインラインで配置し、動作するようにしています。

画像

画像はリンクとじの構文ですが、前に ! が付きます。

![Minion](https://octodex.github.com/images/minion.png)

Minion

または、

![Alt text](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")

Alt text

リンクと同様に、画像にも説明文を書く構文があります。

![Alt text][id]

Alt text

With a reference later in the document defining the URL location:

オリジナル : https://learn.getgrav.org/17/content/markdown

マークダウン

見出し

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading

h6 Heading

コメント

水平線のルール

ボディコピー

インラインHTML

強調

太字

イタリック体

取り消し線

ブロックコート

お知らせ

リスト

順不同

整列

コード

インラインコード

インデントコード

Block code "fences"

シンタックス・ハイライト

テーブル

右寄せのテキスト

リンク

基本的なリンク

タイトルの追加

アンカー

画像