Markdown 構文と拡張機能の実装ガイド

Markdown 編集環境と構文検証

Markdown 文書において、異なる特殊プレースホルダーが占有する空白サイズは異なります。

【1】または // 全角空白
【2】または // 半角空白
【3】または // 半角のさらに半角

目次構造

段落内に [TOC] を記述することで、文書全体の目次構造を自動生成できます。

目次プレビュー

特殊プレースホルダーの空白差異
目次構造
Markdown 見出し
見出しレベル 1 の示例
- 見出しレベル 2 の示例
見出しレベル 1
- 見出しレベル 2
  - 見出しレベル 3
    - 見出しレベル 4
      - 見出しレベル 5
        
        見出しレベル 6
見出し ID
- My Great Heading
見出し ID へのリンク
定義リスト
タスクリスト
段落
フォントスタイル
- フォント、サイズ、色の変更
- 背景色の付与
- 中央揃えの設定
- 添字と上付き文字
区切り線
取り消し線
下線
脚注
リスト
- リスト要素の追加
- ブロック引用
- 順序付きリスト（数字と . 記号）
- リストのネスト
Markdown ブロック
- 引用のネスト
- ブロック内のリスト
- リスト内のブロック
コード表記
- バックティックのエスケープ
コードブロック
リンク
- 自動 URL リンク
- 自動 URL リンクの無効化
- 高度なリンク設定
画像挿入
テーブル
- 配置設定
キーボード入力
エスケープ処理
フローチャート（横）
フローチャート（縦）
標準フローチャート
標準フローチャート（横）
UML シーケンス図
UML シーケンス図（複雑）
UML 標準シーケンス図
ガント図
基本図形
ノード接続
サブグラフ
カスタムスタイル
デモ事例

Markdown 見出し

Markdown では主に 2 種類の見出し格式が利用可能です。

= と - を使用してレベル 1 とレベル 2 を标记します。

見出しレベル 1 示例

==================

見出しレベル 2 示例

------------------

# 記号を使用してレベル 1 からレベル 6 までの見出しを表現できます。レベル 1 は # 1 つ、レベル 2 は 2 つという具合に増えます。

見出しレベル 1

======

Heading level 1

===============

見出しレベル 2

------

Heading level 2

---------------

見出しレベル 3

Heading level 3

見出しレベル 4

Heading level 4

見出しレベル 5

Heading level 5

見出しレベル 6

Heading level 6

見出し ID 設定

多くの Markdown プロセッサは見出しのカスタム ID をサポートしており、一部は自動付与します。カスタム ID を追加すると、その見出しへ直接リンクしたり、CSS でスタイルを修正したりできます。カスタム ID を追加するには、見出しと同じ行に中括弧で囲んだ ID を記述します。

My Great Heading

見出し ID へのリンク

数字記号（#）とカスタム見出し ID を含む標準リンクを作成することで、ファイル内のカスタム ID 付き見出しへリンクできます。

Heading IDs
Heading IDs

定義リスト

一部の Markdown プロセッサでは、カスタムリストおよび用語とその定義を作成できます。定義リストを作成するには、1 行目に用語を入力し、次の行にコロンとスペース、そして定義を記述します。

First Term: This is the definition of the first term.
Second Term: This is one definition of the second term.; This is another definition of the second term.

タスクリスト

タスクリストを使用すると、チェックボックス付きの項目リストを作成できます。タスクリストをサポートするアプリケーションでは、コンテンツの隣にチェックボックスが表示されます。タスクリストを作成するには、リスト項目の前にダッシュ（-）と角括弧を追加し、その前にスペースを挿入します。チェックボックスを選択するには、角括弧内に x を入力します。

プレスリリースを作成する
ウェブサイトを更新する
メディアに連絡する

段落

改行は 2 つ以上のスペース加上回车を使用します。

段落 1:Hello12432143213413421421
段落 2:123412342134123412341234
段落 3:2134123421341234134

I really like using Markdown.

I think I'll use it to format all of my documents from now on.

This is the first line.
And this is the second line.

フォントスタイル

これは太字のテキスト

これは斜体のテキスト

これは斜体かつ太字のテキスト

~~これは取り消し線のテキスト~~

I just love bold text

Italicized text is the cat's meow.

This text is really important.

フォント、サイズ、色の変更

私は黒体字
私は微軟雅黒
私は華文彩雲
私は赤色
私は緑色
私は青色
私はサイズ指定
私は黒体、緑色、サイズ 5

背景色の付与

背景色 yellow

中央揃え

左揃え

右揃え

添字と上付き文字

HTML の下標・上標構文を使用します。
H₂O CO₂
爆米^TM

区切り線

区切り線内容 1

区切り線内容 2

区切り線内容 3

区切り線内容 4

区切り線内容 5

取り消し線

段落のテキストに取り消し線を追加するには、テキストの両端に 2 つのチルダ ~~ を追加します。

~~BAIDU.COM~~
~~BAIDU.COM~~

下線

下線は HTML の <u> タグで実現できます。

下線付きテキスト

脚注

脚注はテキストの補足説明です。
脚注格式は ^[1] のように作成します。

Markdown は順序付きリストと順序なしリストをサポートします。
順序なしリストはアスタリスク（*）、プラス（+）、またはマイナス（-）をリスト标记として使用し、これらの标记の後にスペースを追加してから内容を記入します。

示例 1

First item
Second item
Third item
Fourth item

示例 2

First item
Second item
Third item
Fourth item

示例 3

First item
Second item
Third item
Fourth item

対応 HTML

First item
Second item
Third item
Fourth item

リスト要素の追加

リストの連続性を保ちつつ別の要素を追加するには、その要素を 4 つのスペースまたは 1 つのタブでインデントします。

段落

This is the first list item.
Here's the second list item.
I need to add another paragraph below the second list item.
And here's the third list item.

ブロック引用

This is the first list item.
Here's the second list item.

A blockquote would look great below the second list item.
And here's the third list item.

順序付きリスト

数字と . 記号を使用します。

示例 1

First item
Second item
Third item
Fourth item

示例 2

First item
Second item
Third item
Fourth item

示例 3

First item
Second item
Third item
Fourth item

対応 HTML

First item
Second item
Third item
Fourth item

示例 4

First item
Second item
Third item
1. Indented item
2. Indented item
Fourth item

リストのネスト

リストのネストには、子リストのオプションの前に 4 つのスペースを追加するだけで済みます。

第一項：
- 第一項ネストの最初の要素
- 第一項ネストの二番目の要素
第二項：
- 第二項ネストの最初の要素
- 第二項ネストの二番目の要素

Markdown ブロック

Markdown ブロック引用は段落の开头に > 記号を使用し、その後にスペース記号を続けます。

ブロック引用
技術教程
学ぶのは技術だけでなく夢でもある

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

引用のネスト

ブロックはネスト可能です。1 つの > 記号が最外層、2 つの > 記号が第一層ネストとなります。

最外層

第一層ネスト

第二層ネスト

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

ブロック内のリスト

ブロック中使用リスト

第一項

第二項

第一項

第二項

第三項

リスト内のブロック

第一項 > 技術教程

学ぶのは技術だけでなく夢でもある
第二項 > 技術教程 2

学ぶのは技術だけでなく夢でもある 2

コード表記

段落上の関数またはフラグメントのコードはバックティック（`）で囲むことができます。
単語またはフレーズをコードとして表示するには、バックティックで囲みます。 System.Console.WriteLine("HelloWorld!") System.Console.WriteLine("HelloWorld!")

class Class1 { Public string Name {get; set;} }

コマンドプロンプトで、nano と入力します。
コマンドプロンプトで、nano と入力します。

バックティックのエスケープ

コードとして表示する単語またはフレーズに 1 つ以上のバックティックが含まれる場合、単語またはフレーズを二重バックティック（``）で囲むことでエスケープできます。

Use `code` in your Markdown file.

コードブロック

``` でコードを囲み、言語を指定できます。


window.addEventListener('load', function () {
    console.log('SYSTEM_READY');
});


{
  "firstName": "Taro",
  "lastName": "Yamada",
  "age": 30
}

リンク

これはリンクです技術教程
ブログ
検索エンジン
https://www.example.com
https://markdown.example.com
fake@example.com

My favorite search engine is Duck Duck Go.

HTML の a タグを直接使用
ブログ

自動 URL リンク

多くの Markdown プロセッサは URL を自動的にリンクに変換します。つまり、http://www.example.com と入力すると、角括弧を使用していなくてもプロセッサが自動的にリンクに変換します。

http://www.example.com

自動 URL リンクの無効化

URL の自動リンクを無効にする場合は、URL をバックティック付きコードとして表現することでリンクを削除できます。

http://www.example.com

高度なリンク

I get 10 times more traffic from Google 1 than from Yahoo 2 or MSN 3.

I get 10 times more traffic from Google than from Yahoo or MSN.

画像

ネットワーク画像
![Alt pic]( https://example.com/image.jpg )
![Alt pic]( https://example.com/image.jpg "Optional title" )
![blockchain]( https://example.com/image.jpg )
![blockchain]( https://example.com/image.jpg "ブロックチェーン" )

ローカル画像
![blockchain](file:///C:\\Users\\Personal\\Desktop\\image.jpg "WPF")

Markdown には画像の高さと幅を指定する方法がありません。必要な場合は通常の <img> タグを使用できます。

このリンクは 1 を URL 変数として使用します技術教程。
その後、文書の末尾で変数に値（URL）を割り当てます。

テーブル

Markdown でテーブルを作成するには、| を使用して異なるセルを区切り、- を使用してヘッダーと他の行を区切ります。

ヘッダー	ヘッダー	ヘッダー	ヘッダー
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル
セル	セル	セル	セル

テーブルの配置設定

-: 内容とタイトル欄を右揃え。
:- 内容とタイトル欄を左揃え。
:-: 内容とタイトル欄を中央揃え。

左揃え	右揃え	中央揃え
セル	セル	セル
セル	セル	セル

キーボード入力

Ctrl+Alt+Del でパソコンを再起動

エスケープ

Markdown は特定の意味を表すために多くの特殊記号を使用します。特定の記号を表示する必要がある場合は、エスケープ文字を使用します。Markdown はバックスラッシュを使用して特殊文字をエスケープします。

テキスト太字
\*\* 正常表示アスタリスク \*\*

\\ バックスラッシュ
` バックティック
\* アスタリスク
\_ 下線
{} 中括弧
[] 角括弧
() 小括弧
\# 井戸記号
\+ プラス
\- マイナス
. 英文句点
! 感嘆符

特殊文字	説明	文字のコード
	スペース	` `
<	小なり	`<`
>	大なり	`>`
&	アンド	`&`
￥	人民元	`¥`
©	著作権	`©`
®	登録商標	`®`
°C	摂氏	`°C`
±	プラスマイナス	`±`
×	掛算	`×`
÷	割算	`÷`
²	平方（上標²）	`²`
³	立方（上標³）	`³`

横フローチャートソース格式


graph LR A[正方形] -->B(丸角) B --> C{条件 a} C -->|a=1| D[結果 2221] C -->|a=2| E[結果 1112] F[横フローチャート]

縦フローチャートソース格式


graph TD A[正方形] --> B(丸角) B --> C{条件 a} C --> |a=1| D[結果 1] C --> |a=2| E[結果 2] F[縦フローチャート]

標準フローチャートソース格式


st=>start: 開始枠
op=>operation: 処理枠
cond=>condition: 判断枠 (是か否？)
sub1=>subroutine: サブルーチン
io=>inputoutput: 入出力枠
e=>end: 終了枠
st->op->cond
cond(yes)->io->e
cond(no)->sub1(right)->op

標準フローチャートソース格式（横）


st=>start: 開始枠
op=>operation: 処理枠
cond=>condition: 判断枠 (是か否？)
sub1=>subroutine: サブルーチン
io=>inputoutput: 入出力枠
e=>end: 終了枠
st(right)->op(right)->cond
cond(yes)->io(bottom)->e
cond(no)->sub1(right)->op

UML シーケンス図ソース事例


オブジェクト A->オブジェクト B: オブジェクト B 元気？（リクエスト）
Note right of オブジェクト B: オブジェクト B の説明
Note left of オブジェクト A: オブジェクト A の説明 (ヒント)
オブジェクト B-->オブジェクト A: 元気 (レスポンス)
オブジェクト A->オブジェクト B: 本当に元気？

UML シーケンス図ソース複雑事例


Title: タイトル：複雑使用
オブジェクト A->オブジェクト B: オブジェクト B 元気？（リクエスト）
Note right of オブジェクト B: オブジェクト B の説明
Note left of オブジェクト A: オブジェクト A の説明 (ヒント)
オブジェクト B-->オブジェクト A: 元気 (レスポンス)
オブジェクト B->小三：元気
小三-->>オブジェクト A: オブジェクト B が找我
オブジェクト A->オブジェクト B: 本当に元気？
Note over 小三，オブジェクト B: 我们是朋友
participant C
Note right of C: 没人陪我玩

UML 標準シーケンス図事例


%% シーケンス図例，-> 直線，--> 破線，->> 実線矢印
sequenceDiagram
participant 张三
participant 李四
张三->王五：王五元気？
loop 健康チェック
王五->王五：病気と戦う
end
Note right of 王五：合理 食物 <br/> 医者を見る...
李四-->>张三：很好!
王五->李四：君は？
李四-->王五：很好!

ガント図事例


%% 構文例
gantt
dateFormat YYYY-MM-DD
title ソフト開発ガント図
section 設計
需求 :done, des1, 2014-01-06,2014-01-08
原型 :active, des2, 2014-01-09, 3d
UI 設計 : des3, after des2, 5d
未来任務 : des4, after des3, 5d
section 開発
学習準備理解需求 :crit, done, 2014-01-06,24h
設計框架 :crit, done, after des2, 2d
開発 :crit, active, 3d
未来任務 :crit, 5d
遊ぶ :2d
section テスト
機能テスト :active, a1, after des3, 3d
圧力テスト :after a1 , 20h
テスト報告 : 48h

基本図形

id + [文字説明] 矩形
id + (文字説明) 丸角矩形
id + > 文字説明] 非対称矩形
id + {文字説明} 菱形
id + ((文字説明)) 円形


graph TD
id[テキスト付き矩形]
id4(テキスト付き丸角矩形)
id3>テキスト付き非対称矩形]
id1{テキスト付き菱形}
id2((テキスト付き円形))

ノード間の接続

A --> B A 矢印付き B へ
A --- B A 矢印なし B へ
A -.- B A 破線付き B へ
A -.-> B A 矢印付き破線 B へ
A ==> B A 太線矢印 B へ
A -- 説明 --- B A 矢印なし B へ中間に文字説明
A -- 説明 --> B A 矢印付き B へ中間に文字説明
A -. 説明 .-> B A 矢印付き破線 B へ中間に文字説明
A == 説明 ==> B A 太線矢印 B へ中間に文字説明


graph LR
A[A] --> B[B]
A1[A] --- B1[B]
A4[A] -.- B4[B]
A5[A] -.-> B5[B]
A7[A] ==> B7[B]
A2[A] -- 説明 --- B2[B]
A3[A] -- 説明 --> B3[B]
A6[A] -. 説明 .-> B6[B]
A8[A] == 説明 ==> B8[B]

サブグラフ

格式
subgraph title
graph definition
end


graph TB
c1-->a2
subgraph one
a1-->a2
end
subgraph two
b1-->b2
end
subgraph three
c1-->c2
end

カスタムスタイル

構文：style id 具体スタイル


graph LR
id1(Start)-->id2(Stop)
style id1 fill:#f9f,stroke:#333,stroke-width:4px,fill-opacity:0.5
style id2 fill:#ccf,stroke:#f66,stroke-width:2px,stroke-dasharray: 10,5

デモ

フローチャートを描画し、A、B、C の 3 つの数値の中で最大の数値を見つけます。


graph LR
start[開始] --> input[入力 A,B,C]
input --> conditionA{A は B より大きいか}
conditionA -- YES --> conditionC{A は C より大きいか}
conditionA -- NO --> conditionB{B は C より大きいか}
conditionC -- YES --> printA[出力 A]
conditionC -- NO --> printC[出力 C]
conditionB -- YES --> printB[出力 B]
conditionB -- NO --> printC[出力 C]
printA --> stop[終了]
printC --> stop
printB --> stop


graph LR
A[微信 code 取得ログイン請求]--> B{ユーザー存在するか}
B --> |是| C[ログイン]
B --> |否| D[手機検証コード]
D --> |検証通過|C

7. フローチャート

詳細構文参考：フローチャート構文参考

示例


st=>start: Start:>https://www.example.com
io=>inputoutput: verification
op=>operation: Your Operation
cond=>condition: Yes or No?
sub=>subroutine: Your Subroutine
e=>end

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

8. シーケンス図

詳細構文参考：シーケンス図構文参考

示例 1


Alice->Bob: Hello Bob, how are you?
Note right of Bob: Bob thinks
Bob-->Alice: I am good thanks!

示例 2


Title: Here is a title
A->B: Normal line
B-->C: Dashed line
C->>D: Open arrow
D-->>A: Dashed open arrow

9. ガント図

ガント図の内在思想は単純です。基本は一条の線條図で、横軸は時間、縦軸は活動（プロジェクト）を表し、線條は全体期間上の計画と実際の活動完成状況を表します。任務計画がいつ行われるか、及び実際の進展と計画要求の対比を直観的に示します。
詳細構文参考：ガント図構文参考


title プロジェクト開発フロー
section プロジェクト確定
    需求分析       :a1, 2016-06-22, 3d
    可行性報告     :after a1, 5d
    概念検証       : 5d
section プロジェクト実施
    概要設計      :2016-07-05  , 5d
    詳細設計      :2016-07-08, 10d
    コーディング          :2016-07-15, 10d
    テスト          :2016-07-22, 5d
section 公開検収
    公開：2d
    検収：3d

10. Mermaid フローチャート


A[Hard edge] -->|Link text| B(Round edge)
B --> C{Decision}
C -->|One| D[Result one]
C -->|Two| E[Result two]

11. Mermaid シーケンス図

詳細構文参考：Mermaid フローチャート構文参考


Alice->John: Hello John, how are you?
loop every minute
    John-->Alice: Great!
end

詳細構文参考：Mermaid シーケンス図構文参考

1、ブログに入る：管理 > オプション、里面有個启用数学公式支持、選上後保存。這時、就可以在ブログ里写数学公式了。
2、在公式開始和結尾輸入美元符號：如美元符號 x^2 美元符號、則顯示 x 的平方
3、需要在 http://latex.codecogs.com/eqneditor/editor.php 里面編輯好后复制源码过来。
コード实例：x=\\frac{{-b}\\pm\\sqrt{b^2-4ac}}{2a}（注意両辺加上$符號括起来）
得到如下結果：

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

$ J_\alpha(x) = \sum_{m=0}^\infty \frac{(-1)^m}{m! \Gamma (m + \alpha + 1)} {\left({ \frac{x}{2} }\right)}^{2m + \alpha} \text {、行内公式示例} $

\[ \begin{matrix} 1 & x & x^2 \\ 1 & y & y^2 \\ 1 & z & z^2 \\ \end{matrix} \]

Markdown 中插入公式、一般為
\$公式内容\$ または $$公式内容$$
上下標
使用^来表示上標、_来表示下標、同時如果上下標的内容多于一个字符、可以使用{}来将这些内容括起来当做一个整体

\[x = a_1^n + a_{23}^n + a_{4}^n \]

分数

\[\frac{1}{3} 与 \cfrac{1}{3} \]

求和

\[\frac{d}{dx}e^{ax}=ae^{ax}\quad \sum_{i=1}^{n}{(X_i - \overline{X})^2} \]

求導数

\[\frac{\partial^2 u}{\partial z^2} \]

積分

\[\int ^{10}_1 x^2 dx \]

連乗

\[\prod_{n=1}^{100}2^n \]

極限

\[\lim_{n\rightarrow+\infty} n^2 \]

開方

\[\sqrt[3]{X} 和 \sqrt{1 - x} \]

三角関数

\[\bot \quad \angle \quad \sin(\pi) \quad \cos \quad \tan \]

対数関数

\[\ln15 \quad \log_210 \quad \lg7 \]

関係演算子

\[+ - \pm \times \div \sum \prod \neq \leq \geq \]

分段関数

\[y=\begin{cases} 0 & z<0 \\ 0.5 & z=0 \\ 1 & z>0 \end{cases}\]

行列

\[\begin{bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{bmatrix} \tag{1} \]

\[ \begin{Bmatrix} 1 & 2 & 3 \\ 4 & 5 & 6 \\ 7 & 8 & 9 \end{Bmatrix} \tag{2} \]

\[\left[ \begin{matrix} 1 & 2 & \cdots & 4 \\ 7 & 6 & \cdots & 5 \\ \vdots & \vdots & \ddots & \vdots \\ 8 & 9 & \cdots & 0 \\ \end{matrix} \right] \tag{3} \]

\[\left[ \begin{array}{cc|c} 1 & 2 & 3 \\ 4 & 5 & 6 \end{array} \right] \tag{4} \]

这里是行間行列テスト

\$\\bigl( \begin{smallmatrix} l&l\\\\j&z \end{smallmatrix} \\bigr)\$

这里是行間行列テスト

数学公式倉靠参考リンク

https://blog.example.com/article1
https://blog.example.com/article2
https://www.example.com/article3
https://www.example.com/article4

MarkDown 構文示例 ↩︎

タグ: Markdown Mermaid LaTeX HTML technical-writing

9月9日 00:50 投稿

特殊文字	説明	文字のコード
	スペース	` `
<	小なり	`<`
>	大なり	`>`
&	アンド	`&`
￥	人民元	`¥`
©	著作権	`©`
®	登録商標	`®`
°C	摂氏	`°C`
±	プラスマイナス	`±`
×	掛算	`×`
÷	割算	`÷`
²	平方（上標²）	`²`
³	立方（上標³）	`³`

特殊文字	説明	文字のコード
	スペース	` `
<	小なり	`<`
>	大なり	`>`
&	アンド	`&`
￥	人民元	`¥`
©	著作権	`©`
®	登録商標	`®`
°C	摂氏	`°C`
±	プラスマイナス	`±`
×	掛算	`×`
÷	割算	`÷`
²	平方（上標²）	`²`
³	立方（上標³）	`³`

異端開発室

Markdown 構文と拡張機能の実装ガイド

Markdown 編集環境と構文検証

目次構造

目次プレビュー

Markdown 見出し

見出しレベル 1 示例

見出しレベル 2 示例

見出しレベル 1

Heading level 1

見出しレベル 2

Heading level 2

見出しレベル 3

Heading level 3

見出しレベル 4

Heading level 4

見出しレベル 5

Heading level 5

見出しレベル 6

Heading level 6

見出し ID 設定

My Great Heading

My Great Heading

見出し ID へのリンク

定義リスト

タスクリスト

段落

フォントスタイル

フォント、サイズ、色の変更

背景色の付与

中央揃え

添字と上付き文字

区切り線

取り消し線

下線

脚注

リスト

示例 1

示例 2

示例 3

対応 HTML

リスト要素の追加

ブロック引用

順序付きリスト

示例 1

示例 2

示例 3

対応 HTML

示例 4

リストのネスト

Markdown ブロック

引用のネスト

ブロック内のリスト

リスト内のブロック

コード表記

バックティックのエスケープ

コードブロック

リンク

自動 URL リンク

自動 URL リンクの無効化

高度なリンク

画像

テーブル

テーブルの配置設定

キーボード入力

エスケープ

横フローチャートソース格式

縦フローチャートソース格式

標準フローチャートソース格式

標準フローチャートソース格式（横）

UML シーケンス図ソース事例

UML シーケンス図ソース複雑事例

UML 標準シーケンス図事例

ガント図事例

基本図形

ノード間の接続

サブグラフ

カスタムスタイル

デモ

7. フローチャート

特殊文字	説明	文字のコード
	スペース	` `
<	小なり	`<`
>	大なり	`>`
&	アンド	`&`
￥	人民元	`¥`
©	著作権	`©`
®	登録商標	`®`
°C	摂氏	`°C`
±	プラスマイナス	`±`
×	掛算	`×`
÷	割算	`÷`
²	平方（上標²）	`²`
³	立方（上標³）	`³`