Markdown学習ノート

Markdown の概要#

目的#

Markdown は軽量マークアップ言語で、創始者はジョン・グルーバー（John Gruber）です。人々が 読みやすく書きやすいプレーンテキスト形式で文書を作成し、それを有効なXHTML（またはHTML）文書に変換することを可能にします。

可読性は、何よりも重要です。Markdown 形式で書かれた文書は、プレーンテキストとして直接公開でき、たくさんのタグやフォーマット指示から構成されているようには見えません。Markdown の構文は、Setext、atx、Textile、reStructuredText、Grutatext、_EtText_などの既存の text-to-HTML 形式の影響を受けており、最大のインスピレーションは実際にはプレーンテキストの電子メールの形式です。

要するに、Markdown の構文は一部の記号で構成されており、それらは厳選されていて、その機能は一目瞭然です。例えば、文字の両側にアスタリスクを加えると、強調されているように見えます。Markdown のリストは、うん、リストのように見えます。Markdown のブロック引用は、実際に引用文のように見えます。まるであなたが電子メールで見たことがあるように。

HTML との互換性#

Markdown 構文の目標は、ウェブに適した執筆言語になることです。

Markdown は HTML を置き換えようとしているわけではなく、むしろ HTML に近づこうともしていません。その構文の種類は非常に少なく、HTML タグのごく一部にしか対応していません。Markdown の考え方は、HTML 文書をより簡単に書けるようにすることではありません。私の見解では、HTML はすでに書きやすいです。Markdown の理念は、文書をより読みやすく、書きやすく、自由に変更できるようにすることです。HTML は発表の形式であり、Markdown は執筆の形式です。こうして、Markdown の構文はプレーンテキストがカバーできる範囲だけを含んでいます。

Markdown の範囲に含まれないタグは、文書内で直接 HTML で書くことができます。これは HTML でも Markdown でもないと特に注記する必要はありません；ただ直接タグを追加すればよいのです。

制約されるのは、いくつかの HTML ブロック要素――例えば<div>、<table>、<pre>、<p>などのタグで、前後に空行を加えて他の内容と区別し、開始タグと終了タグはタブや空白でインデントしてはいけません。Markdown の生成器は十分に賢く、HTML ブロックタグの外に不必要な<p>タグを追加しません。

以下の例では、Markdown ファイルに HTML テーブルを追加しています：

これは普通の段落です。

<table>
    <tr>
        <td>Foo</td>
    </tr>
</table>

これは別の普通の段落です。

注意してください、HTML ブロックタグ間の Markdown 形式の構文は処理されません。例えば、HTML ブロック内で Markdown スタイルの強調を使用しても効果はありません。

HTML のインラインタグである<span>、<cite>、<del>は、Markdown の段落、リスト、または見出しの中で自由に使用できます。個人の好みに応じて、Markdown 形式を使用せずに HTML タグを直接使用してフォーマットすることもできます。例えば、HTML の<a>や<img>タグが好きな場合は、Markdown が提供するリンクや画像タグの構文を使用せずに、これらのタグを直接使用できます。

HTML ブロックタグ間とは異なり、HTML インラインタグ間では Markdown 構文が有効です。

Markdown 基本構文#

コードブロック#

特定の関数名やキーワードを強調したい場合は、`function_name()` を使用できます。

通常、エディタはコードスニペットに適したハイライト方法を適用しますが、``` でコードを囲み、言語を指定することもできます。

サポートされている言語：actionscript, apache, bash, clojure, cmake, coffeescript, cpp, cs, css, d, delphi, django, erlang, go, haskell, html, http, ini, java, javascript, json, lisp, lua, matlab, nginx, objectivec, perl, php, python, r, ruby, scala, smalltalk, sql, tex, vbscript, xml

{% raw %}
&#96`` javascript
$(document).ready(function () {
    alert('hello world');
});
&#96``
{% endraw %}

ありがとう hexo 渦の助け!
詳しくは hexo タグプラグインを参照

4 つの空白でインデントしてコードを貼り付けることでも、同じ効果を得ることができます。

見出し#

Markdown は見出しを表示するために 2 つの方法（Setext と Atx）を提供しています。
例:

Setext方式
タイトル1
=================
タイトル2
-----------------

Atx方式
# タイトル1
## タイトル2
###### タイトル6

改行#

テキストの末尾に 2 つ以上の空白を使用して改行を示します。

引用#

行の先頭に[大なり記号+空白]を使用して引用段落を示し、内部に複数の引用をネストできます。

構文：

> これは引用です、
> ここには改行がありません、
> ここで改行しました。
> > 内部ネスト

効果：

これは引用です、
ここには改行がありません、
ここで改行しました。

内部ネスト

リスト#

無秩序リストは、*、+、または - の後に空白を加えて示します。

構文：

* アイテム 1
* アイテム 2
* アイテム 3

+ アイテム 1
+ アイテム 2
+ アイテム 3

- アイテム 1
- アイテム 2
- アイテム 3

効果：

アイテム 1
アイテム 2
アイテム 3

アイテム 1
アイテム 2
アイテム 3

アイテム 1
アイテム 2
アイテム 3
有秩序リストは、数字と英語の句点と空白を使用して示します。
構文：

1. リストの前に[数字+空白]を使用
2. 自動的に数字を追加します
7. 数字が間違っていても心配しないでください。表示時にこの行の7を3に修正します

効果：

リストの前に [数字 + 空白] を使用
自動的に数字を追加します
数字が間違っていても心配しないでください。表示時にこの行の 7 を 3 に修正します

強調#

Markdown は * または_を使用して強調を示します。

構文：

単一アスタリスク = *イタリック*
単一アンダースコア = _イタリック_
二重アスタリスク = **太字**
二重アンダースコア = __太字__
取り消し線 = ~~太字~~

効果：
単一アスタリスク = イタリック
単一アンダースコア = イタリック
二重アスタリスク = 太字
二重アンダースコア = 太字
取り消し線 = 太字

テーブル#

構文：

| テーブル        | は           | クール  |
| ------------- |:-------------:| -----:|
| col 3 is      | 右揃え | $1600 |
| col 2 is      | 中央揃え      |   $12 |
| zebra stripes | きれい      |    $1 |

または

犬 | 鳥 | 猫
----|------|----
foo | foo  | foo
bar | bar  | bar
baz | baz  | baz

効果：

テーブル	は	クール
col 3 is	右揃え	$1600
col 2 is	中央揃え	$12
zebra stripes	きれい	$1

または

犬	鳥	猫
foo	foo	foo
bar	bar	bar
baz	baz	baz

リンク#

Markdown は 2 種類のスタイルのリンクをサポートしています：インラインとリファレンス。

インライン：中括弧で表示されるリンクテキストの後に、丸括弧で囲まれたリンクが続きます。リンクに title 属性がある場合は、リンク内で空白と "title 属性" を使用します。
リファレンス：通常、異なる場所で同じリンクを使用する場合に適用されます。通常、2 つの部分に分かれ、呼び出し部分は [リンクテキスト][ref]；定義部分はテキスト内の他の場所に出現し、形式は [ref]: http://some/link/address（オプションのタイトル）。
注：ref は大文字と小文字を区別しません。
構文：

これはインライン[例](http://sphenginx.github.io "オプションのタイトル")です。
これはリファレンス[例][ref]です。
[ref]:http://sphenginx.github.io (オプションのタイトル)

効果：
これはインライン例です。
これはリファレンス [例][ref] です。
[ref]:http://sphenginx.github.io (オプションのタイトル)

画像#

画像の使用方法は基本的にリンクと似ていますが、中括弧の前に感嘆符を追加します。

構文:

![画像名](http://画像のURL)
![GitHubアバター](https://avatars1.githubusercontent.com/u/1829395?v=3&s=460)

効果:

GitHub アバター

注：Markdown では画像のサイズを設定できません。サイズを設定する必要がある場合は、HTML タグ<img>を使用する必要があります。

<img src="https://avatars1.githubusercontent.com/u/1829395?v=3&s=460" width="400" height="100">

効果は次の通りです：

分割線#

1 行に 3 つ以上の *、-、または_を使用して分割線を追加できます。空白は含めることができますが、他の文字は含めることができません。

構文：

***

効果：

エスケープ文字#

Markdown のエスケープ文字は \ で、エスケープできるものは：

\\ バックスラッシュ
\` バッククォート
\* アスタリスク
\_ アンダースコア
\{\} 中括弧
\[\] 中括弧
\(\) 丸括弧
\# シャープ
\+ プラス
\- マイナス
\. 英文句点
\! 感嘆符

色とフォント#

Markdown は色とフォントをサポートしていないため、色やフォントを追加したい場合は、HTML タグを使用してこれらの要求を実現する必要があります。

構文:

<font color="red">私は赤いです</font>

効果:
私は赤いです

高度なテクニック#

Todo リストを作成する#

構文：

- [ ] PDF形式で文書をエクスポートすることをサポート
- [ ] Cmdレンダリングアルゴリズムを改善し、局所的なレンダリング技術を使用してレンダリング効率を向上させる
- [x] Todoリスト機能を追加
- [x] LaTex数式のレンダリング問題を修正
- [x] LaTex数式番号機能を追加

効果：

PDF 形式で文書をエクスポートすることをサポート
Cmd レンダリングアルゴリズムを改善し、局所的なレンダリング技術を使用してレンダリング効率を向上させる
Todo リスト機能を追加
LaTex 数式のレンダリング問題を修正
LaTex 数式番号機能を追加

効率的なフローチャート | シーケンス図の描画#

なぜか Git ページはこの書き方をサポートしていないので、最新の Markdown 構文解析器で試してみるか、Markdown オンラインエディタをクリックして試してください。

st=>start: 開始
op=>operation: あなたの操作
cond=>condition: はいまたはいいえ？
e=>end

st->op->cond
cond(yes)->e
cond(no)->op

インライン HTML 要素#

現在、部分的なインライン HTML 要素の効果のみがサポートされています。これには<kdb> <b> <i> <em> <sup> <sub> <br>が含まれます。

キー表示

使用 <kbd>Ctrl<kbd>+<kbd>Alt<kbd>+<kbd>Del<kbd> コンピュータを再起動します

効果:
使用 Ctrl+Alt+Del コンピュータを再起動します

コードブロック

使用 <pre></pre> 要素もコードブロックを形成できます

太字イタリック

<b> Markdownはここでも適用されます。例えば *太字* </b>

拡張#

jsfiddle、gist、runjs、Youku 動画をサポートしており、URL を直接入力すると、その後に自動的にプレビューが追加され、関連内容が展開されます。

http://{url_of_the_fiddle}/embedded/[{tabs}/[{style}]]/
https://gist.github.com/{gist_id}
http://runjs.cn/detail/{id}
http://v.youku.com/v_show/id_{video_id}.html

数式#

エディタに数学公式を挿入する必要がある場合は、2 つのドル記号 $$ で TeX または LaTeX 形式の数学公式を囲むことで実現できます。送信後、Q&A および記事ページは必要に応じて Mathjax を読み込み、数学公式をレンダリングします。例えば：

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$

$$
x \href{why-equal.html}{=} y^2 + 1
$$

効果は次の通りです：
$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$

x \href{why-equal.html}{=} y^2 + 1

Markdown エディタ#

Cmd Markdown エディタの使用を歓迎します

Win プラットフォーム

MarkdownPad
Haroopad - 次世代文書プロセッサ
ホームページに入ったら、ユーザーをクリックしてダウンロードページに移動します

Linux プラットフォーム

ReText

Mac プラットフォーム

結論#

上記の形式は比較的一般的な形式であるため、これらの構文について比較的詳細な説明を行いました。これら以外にも Markdown には他の構文があり、もっと学びたい場合はこの『Markdown 構文説明』を参考にしてください。😄 (hexo は絵文字をサポートしていないようです)……

付録#

今すぐ Markdown で記事を書いて、Markdown の優雅さを体験することを強くお勧めします！