象と散歩: .markdown

ラベル .markdown の投稿を表示しています。すべての投稿を表示

Post Date：2023年3月26日　 Last Updated：2024年11月10日

Markdown（Typora）でMindmapを描く！

Typoraは優れたMarkdownエディターで、Mac、Windows、Linuxで使えます。有料アプリですが、$14.99（約2,000円）を払う価値のあるMarkdownエディターです。

Mermaidは、Markdown形式のテキストで図を描くことができるオープンソースのJavaScriptツールですが、Typoraは、Mermaidの機能を組み込んでいるので、Mermaidのコードを書くと図形描画ができます。

Mermaidでは、シンプルなテキストを使って複雑なフローチャート、シーケンス図、ガントチャート、クラス図、そしてマインドマップなどを作成することができます。

マインドマップ自体が、階層構造になっているので、Mermaidでの構文もとても簡単です。

Mermaidを使ってマインドマップを作成する

```mermaidでMermaidのコードが書けるようになります。

```mermaid

最初の行にmindmapと書いて、次の行からがマインドマップの構文になります。

mindmap

マインドマップの各ノードを描く

マインドマップは中心のトピックから放射状にアイデアが階層構造で配置されている図です。Mermaid でマインドマップを描くときも、階層構造で記載するので。マインドマップをイメージしながら書くことができます。

下記はrootから3つのメインブランチ（a1, a2, a3）があるマインドマップの例です。階層構造で示せば下記のようになります。

Root

mermaid でも同じようにRootから1階層下げてa1, b1, c1 と記載します。

mindmap
	root
		a1
		b1
		c1

下記のように描画されます。

次にa1の下にサブブランチを2つ、a2_1とa2_2を追加します。a1から1階層下げてa2_1, a2_2を記載します。

mindmap
	root
		a1
			a2_1
			a2_2
		b1
		c1

下記のように描画されます。

上記のマインドマップに、a2_1の下にサブブランチ、a3を追加します。

mindmap
	root
		a1
			a2_1
				a3
			a2_2
		b1
		c1

下記のように描写されますが、root --> a1 --> a2_1 --> a3 と階層が下がるとブランチが段々と細くなっていきます。

各ノードの形を変える

各ノードに使える形状には、

cloud（雲吹き出し）
) ( で括る
bang（爆弾吹き出し）
)) (( で括る
circle（円形）
(( ))で括る
round square（角丸四角形）
( )で括る
square（四角形）
[ ] で括る
default（デフォルト）

の6種類がありますが、デフォルトは何も指定しない場合です。 は改行です。

mindmap
	)cloud<br/>雲吹き出し(
	))bang<br>星吹き出し((
	((Circle<br>円形))
	(rounded square<br>角丸四角形)
	[square<br>四角形]
	default shap<br>デフォルト

描画すると下記のようになります。squareとdefaulとの違いはよく見るとデフォルトは下に線が入っています。

アイコンを使う

ノードの中にアイコンを記載することもできます。Font Awesomrのアイコンが使用でき、class名を指定します。

Font Awesomrのclass名は、Font Awesome4.7フォント一覧で調べられます。

アイコンを記載したノードの下に同じ階層で

::icon(fa class名)

という形式で指定します。

a1に音符、b1に封筒、c1にユーザのアイコンをそれぞれ指定する場合には下記のように記載します。

mindmap
	)Root(
		music
		::icon(fa fa-music)
		envelope
		::icon(fa fa-envelope-o)
		user
		::icon(fa fa-user)

こんな感じです。Font Awesomrのclass名で記載するので少々面倒ですが、アイコンを使うとマインドマップらしくなります。

色の指定と配置はできない

ブランチの色を変更することはできません。またブランチの配置を変更することもできません。しかし、マインドマップ描画ソフトを使わなくてもMarkdownでマインドマップが簡単に描けるのは便利です。

円グラフを書く（おまけ）

最後に Mermaid を使った円グラフの描き方です。こちらも簡単に描けます。

```mermaid コードを記載します。

1行目：pie円グラフの宣言
2行目：titletitleの後が円グラフの表題
3行目以降：円グラフの要素
”グラフの項目名”：比率

下記がサンプルコードです。

pie
	title pie chart
	"50%" : 50
	"30%" : 30
	"20%" : 20

下記が、Mermaidで描いた円グラフになります。

bar chart（棒グラフ）もMermaidで描けるともっと便利になるのですが、、、。

Post Date：2020年5月27日　

LaTex で数式を書く最も簡単な方法

Markdown（マークダウン）で Latex を使って数式を書く方法について「象と散歩: TyporaでMarkdownを始めよう！」で紹介しましたが、利用頻度の低い LaTex の書式なんて、直ぐに記憶の彼方に、、、。

しかし、今は便利な世の中。オンラインで、ポチポチと式を選んでいくと簡単に LaTex を作成することができます。

アカウントを登録しなくて利用できるサービスには下記の2つがあります。

一長一短ありますが、操作性の観点では HostMath の方が使いやすいです。

LaTexの基本は押さえておく

オンラインサービスを使う前に、LaTexの基本は理解しておきましょう。

基本形は、

\（コマンド）{値}

とシンプルです。これだけ理解していれば大丈夫です。

例えば、ルートを使う場合には、

\sqrt{数値 or 式}

と、記載すれば、下記のように表示されます。

\[ \sqrt{数値 \, or \, 式} \]

HostMathでLaTexを作成

では、さっそくHostMath を使って数式を作っていきます。例題は分散です。

\[ \sigma^2 = \frac{1}{n} \sum_{i=1}^n(x_{i} - \bar{x})^2 \]

σの二乗

"GK&Fun (Greek And Function)” からσを選択します。エディター画面に \sigma と表示されて、下のビューアー画面には、σ が表示されます。

べき乗は、”^” を使います。エディター画面で \sigma の後に ^2= まで入力します。

式の左側が完成です。

分数の入力

続いて1/nを入力するために、”Math” から ”ab/cd” を選択します。

エディター画面には \frac{ab}{cd} が追加され、プレビュー画面には、ab/cd が追加されています。

ab が分子、cd が分母なので、ab を 1 に cd を n に書き換えます。

Σの入力

続いては、Σの部分になります。”Math” から ”Σ” を選択すると、\sum_a^b が追加されました。

しかし、この形式は、これだけ理解すれば大丈夫といった基本形と異なります。値がひとつなので{}が省略されていますが、正しくは下記となります。

\sum_{下限}^{上限}

エディター画面で、下限を {i=1}、上限を {n} に書き換えます。

※{}で括らないで、a の部分を i=1 にしてしまうと違う解釈となってしまいます。

（x-x̄）^2

エディター画面で (x-x)^2 を追加します。

エディター画面で、2二つ目の x を選択して、”Logic” から ā を選択すると \bar{a} となります。

\bar{a} を \bar{x} とすれば、完成です。

完成した式（LaTex）をMarkdownで利用する

今回はTyporaではなく、Google Colaboratory で利用します。

Google Colaboratory については、「象と散歩: 1分でPythonの学習を始める！」で紹介していますが、Googleが提供する Python 実行環境です。テキストを Markdown で記載できます。

Google Colaboratory で LaTex を使う場合には、数式を $$ で囲みます。

$$ \sigma^2=\frac{1}{n}\sum_{i=1}^n(x_{i}-\bar{x})^2 $$

ブログで LaTex を使って式を書く

ブログでLaTexで記載した数式を表示するためには「MathJax」を利用します。

CDNサービスが提供されているので下記のコードを </head> の前に追加します。

<script async='async' src='https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML'/

LaTex で記載した数式を使う場合には、下記のように “\[“ で囲みます。

\[
\sigma^2 = \frac{1}{n} \sum_{i=1}^n(x_{i} - \bar{x})^2
\]

下記のように表示されます。

\[ \sigma^2 = \frac{1}{n} \sum_{i=1}^n(x_{i} - \bar{x})^2 \]

Post Date：2019年8月26日　

Markdown（Typora）でガントチャート

Typora で Markdown シリーズの第4弾は、Mermaid を使ってのガントチャートの作成です。MarkdownエディタのTyopraは、mermaid でガントチャートを記述することができます。

Markdownで描くガントチャートには、

メリット

シンプルなガントチャート
簡単にテキストベースでガントチャートが作成できる
テキストなので差分管理も簡単

デメリット

マイルストーンが設定できない
順序を示す矢印が使用できない
複雑なガントチャートには向かない

という特徴があります。

Typora でガントチャート

Typora でガントチャートを作成するために、```mermaid でEnterすると mermaid のコードが記述できるようになるので、最初の行に gantt と書きます。

タイトル行

title に続けてタイトルを記述します。

日付フォーマット

dateFormat
axisFormat

dateFormat で gantt の中で使用する日付のフォーマットを定義します。ネットで検索した多くの例は、dateFormat YYYY-MM-DD となっていますが、これは、2019-08-25 のように日付を記述するという意味です。

フォーマット	記述形式
YYYY	年4桁
YY	年2桁
MM	月2桁
DD	日2桁

上記以外の記号文字はそのまま表示されます。つまり、dateFormat MM/DD とすれば、月と日をスラッシュ区切りで記述するという意味になります。

下記の例は、dateFormat で年4桁で記述すると宣言した場合の記載方法です。

```mermaid
gantt
dateFormat YYYY
axisFormat %Y/%m
task1: 2019, 2020
task2: 2020, 2021
task3: 2021, 2022
```

日付の形式を指定する

次に axisFormat ですが、これは、軸の日付フォーマットになります。上記の例でもは、年4桁/月となります。その他に下記のフォーマットが使えます。

フォーマット	記述形式
%Y	yyyy: 年4桁
%y	yy: 年2桁
%m	mm: 月2桁（01-12）
%d	dd: 日2桁（01-31）

上記表以外の記号文字は、そのまま表示されるので %m/%d とすれば、mm/dd の形式で表示されます。

タスクの期間の記述方法

各タスクの期間を記述する方法にはいくつかあります。

開始日付と終了日付+1日で記載

e.g. 08/01,08/08

開始日付と日数で記載

e.g. 08/01,7d

開始日と週数で記載

e.g. 08/01,1w

期間だけを記載（2つ目以降のタスク）

e.g. 7d or 1w

下記の例は、何れも1週間の期間となります。

```mermaid
gantt
title 1週間の表記方法
dateFormat MM/DD
axisFormat %m/%d
task1(08/01-08/08): 08/01,08/08
task2(08/08,7d)   : 08/08,7d
task3(1w)         : 1w
```

後続タスクの記述方法

後続タスクは、after を使います。表示上は何ら変わらないので、すべてのタスクを開始日と終了日で記載するのであれば、afterを使う必要はありません。

下記の例では、task1の終了後にtask3が開始されます。

```mermaid
gantt
title 後続タスク
dateFormat MM/DD
axisFormat %m/%d
task1: 08/01,08/08
task2: 08/05,5d
task3: after task1,1w
```

また、タスク名が長い場合などには、エイリアス名を付けることも可能です。下記の例では、task1 を t1 と定義して、8行目で after t1 として利用しています。

```mermaid
gantt
title 後続タスク
dateFormat MM/DD
axisFormat %m/%d
task1: t1, 08/01,08/08
task2: t2, 08/05,5d
task3: t3, after t1,1w
```

タスクのステータスとクリティカルタスク

各タスクは、完了、実行中とクリティカルタスクを示すことができます。

記述方法	意味
done	完了タスク
active	実施中のタスク
crit	クリティカルタスク
crit, done	完了したクリティカルタスク
crit, active	実施中のクリティカルタスク

```mermaid
gantt
title タスクステータスとクリティカルタスク
dateFormat MM/DD
axisFormat %m/%d
task1:       done,   08/08, 1w
task2: crit, done,   08/15, 1w
task3: crit, avtive, 08/22, 1w
task4:               08/29, 1w
task5: crit,         09/05, 1w
```

セクション

タスクをセクション毎に分けることができます。下記は、”準備”、”実行”、”確認”と3セクションに分けている例です。

```mermaid
gantt
dateFormat  MM/DD
axisFormat  %m/%d
title ガントチャート
 
section 準備
終了タスク: done, 07/07, 4w
 
section 実行
アクティブタスク: active, t1, 08/04, 28d
後続タスク: after t1, 09/29
 
section 確認
クリティカル: crit, 09/01, 09/15
最終タスク: 09/15, 2w
```

Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。

Post Date：2019年8月17日　

Markdown（Typora）でシーケンス図を描く！

TyporaでMarkdownを始めよう！ | 象と散歩でTyporaでのMarkdownの書き方、そして、TyporaでMarkdown第２弾として、Markdown（Typora）でフローチャートを描く | 象と散歩で、flowchart.js を使ったフロチャートの書き方を紹介しましたが、今回は、第３弾、Markdown でのシーケンス図の書き方です。

Typora では、js-sequence-diagrams か mermaid を使ってシーケンス図が描けます。

文法サポートでダイアグラムをチェック

フローチャートを描くときにも説明しましたが、最初にTyporaのメニューバーの "ファイル(F) → 設定" で文法サポートのダイアグラムをチェックをします。

これで、Markdownとしてシーケンス図が記述できるようになります。

Markdownでシーケンス図を描く（js-sequence-diragrams）

初めに js-sequence-diagrams を使ってシーケンス図を描写する方法です。Markdownでは、```sequence から ``` の間に記述しますが、Typoraでは、

```seguence

と書いてEnterすると、シーケンスダイアグラムが開きます。

ここにコマンドを記載していきます。

js-sequence-diagrams のコマンド一覧

js-sequence-diagrams は、基本的にメッセージしかサポートしていませんので、複合フラグメントなど複雑なシーケンス図は記載できません。

下記がコマンド一覧になります。

コマンド	説明
Title: hogehoge	タイトルをhogehogeにする
A->B: message text	AからBへの矢印線
A-->B: message text	AからBへの破線矢印
A->>B: message text	AからＢへのオープン矢印線
A-->>B: message text	AからＢへの破線オープン矢印
participant hoge (as A)	ライフライン名 hoge（を A とする）
Note right/left of A: hoge	Aの右or左にhogeと記載
Note over A: hoge	Aの上にhogeと記載
Note over A,B: hoge	AとBの上にhogeと記載

ライフライン名は、コマンドを書いた順番になるので最初に participant で定義するとわかりやすいです。またエイリアス名を付けられるので、コマンドの中ではシンプルにA,B,Cなどが使えます。

では、さっそくシーケンス図を描いてみましょう。

``` sequence
Title: サンプルシーケンス図（js-sequence-diagrams）
participant 処理1 as A
participant 処理2 as B
participant 処理3 as C
A->B: 同期メッセージ
B-->A: 応答メッセージ
B->>C: 非同期メッセージ
C-->A: 応答メッセージ
B->B: 閉じる
```

Markdownで描くシーケンス図（js-sequence-diagrams編）

下記は、ノートの記載方法ですが、participant でA, Bの順番を定義しておかないと、最初にBの右側にノートを描くコマンドがあるので、順番が逆転してしまいます。ノートの中を改行するときには、\n を使います。

``` sequence
participant A
participant B
Note right of B: Bの右側に\nノート
Note over A: Aの上にノート
Note left of A: Aの左側に\nノート
Note over A,B: AとBの上にノート
```

Markdownで描くシーケンス図 Notes（js-sequence-diagrams）

Markdownでシーケンス図を描く（js-sequence-diragrams）

js-sequence-diagrams で描いたシーケンス図を memaid で書くと下記のようになります。 ```mermaid で Enter して、エディタを開きます。

先頭行に sequenceDiagram と書くと mermaid でシーケンス図が書けます。

mermaid には、非同期メッセージを表すオープン矢印線はありませんが、ライフライン上でイベントの実行範囲を + と - を使って表記できます。

下記の例では、処理2（B）の +Bから-Aまで（処理2が同期メッセージを受けてから処理1に応答メッセージを返すまで）と処理3（C）の +C から -A まで（処理3が同期メッセージを受けてから処理1に応答メッセージを返すまで）がインベント実行中となります。

``` mermaid
sequenceDiagram
Title: シーケンス図（mermaid）
participant A as 処理1
participant B as 処理2
participant C as 処理3
A->>+B: 同期メッセージ
B-->>-A: 応答メッセージ
B->>+C: 同期メッセージ
C-->>-A: 応答メッセージ
B->>B: 閉じる 
```

Markdownで描くシーケンス図（mermaid編）

sequenceDiagram(mermaid) のコマンド一覧

下記が mermaid でシーケンス図を書くときのコマンド一覧になります。js-sequence-diagramsと大体同じですが、先に記したように mermaid ではオープン矢印はありません。その代わりに矢印なしの線と破線、があります。participant の使い方も少し異なります。

またアクターの前に + と - 記号を付けることによって、A->>+B から B-->>-A のように同一ライフライン上の + から - までがイベント実行中の表記となります。

コマンド	説明
Title: hogehoge	タイトルをhogehogeにする
A->B: message text	AからBへの線（矢印なし）
A-->B: message text	AからBへの破線（矢印なし）
A->>B: message text	AからＢへの矢印線
A-->>B: message text	AからＢへの破線矢印
A-xB: message text	AからＢへの矢印 and x(async)
A--xB: message text	AからＢへの破線矢印 and x(async)
participant A as hoge	ライフライン名 hoge を A とする
Note right/left of A: hoge	Aの右or左にhogeと記載
Note over A: hoge	Aの上にhogeと記載
Note over A,B: hoge	AとBの上にhogeと記載

ノートの書き方は、js-sequence-diagrams と同じですが、改行が使えません。

``` mermaid
sequenceDiagram
participant A
participant B
Note right of B: Bの右側に\nノート
Note over A: Aの上にノート
Note left of A: Aの左側に\nノート
Note over A,B: AとBの上にノート
```

Markdownで描くシーケンス図 Notes（mermaid編）

mermaid ではLoop処理が描ける

mermaid では、下記のように記載することでLoop処理も描けます。

loop Loop text
... statements ...
end

``` mermaid
sequenceDiagram
participant A
participant B
Note right of B: Bの右側にノート
Note over A: Aの上にノート
Note left of A: Aの左側にノート
Note over A,B: AとBの上にノート
```

Markdownで描くシーケンス図 Loop処理（mermaid編）

最後に

Markdown で描くシーケンス図では、複雑なシーケンス図を描くのには少々難ありですが、簡単なシーケンス図を描くのであれば十分な表現力です。

メイン画像に使ったシーケンス図は、WebSequenceDiagramsで作成したものです。コマンドの記載方法は、js-sequence-diagrams とほぼ同じですが、イベントやループなども使えます。また、スタイルを選択して手書き風などにもできます。

URLを指定して、若しくは画像としてExportして、Markdownのドキュメントの中で使うこともできます。

Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。

Post Date：2019年7月22日　

Markdown（Typora）でフローチャートを描く

TyporaでMarkdownを始めよう！ | 象と散歩でTyporaでのMarkdownの書き方を紹介いたしましたが、今回は、TyporaでMarkdown第2弾として、flowchart.js を使ったフロチャートの書き方です。

文法サポートでダイアグラムをチェック

最初にTyporaのメニューバーの "ファイル(F) → 設定" で文法サポートのダイアグラムをチェックをします。

これで、シーケンス図、クラス図、フローチャート、ガントチャートなどを記述することができるようになりますが、今回は、flowchart.js を使ってフローチャートを記述する方法を紹介します。

Markdownでフローチャートを描く

フローチャートは、```flow から ``` の間に記述しますが、Typoraでは、

```flow

と書いて Enterすると、フローチャートダイアグラムが開きますので、こちらに記述していきます。

前半にエイリアス名の定義（エイリアス名==>コマンド: 処理名）を記述します。次に後に定義したエイリアス名を使ってフローを記述していきます。

```flow
# エイリアス名の定義
# フローの記述
```

コマンドの記述方法

エイリアス名で使うコマンド一覧です。利用できるオブジェクトは、処理ボックス、入出力ボックス、サブルーチンボックス、条件分岐などがあります。

コマンド（エイリアス名の定義）	意味
alias_name=>start: TEXT	処理開始
alias_name=>end: TEXT	処理終了
alias_name=>operation: TEXT	処理
alias_name=>iputoutput: TEXT	入出力
alias_name=>subroutine: TEXT	サブルーチン
alias_name=>condition: TEXT	条件分岐
alias_name=>COMMAND : TEXT :>URL[https://.....]	処理名のURLリンク

alias_name と => の間はスペース不用
command: と NAME の間にはスペース必要

下表は、フローを記述するコマンド一覧です。フローはすべてのオブジェクトが繋がるように記載します。

コマンド（フローの記述）	意味
alias_name1->alias_name2	name1からname2へ矢印
alias_name(right)	右方向へ矢印
alias_name(left)	左方向へ矢印
alias_name(yes)	alias_name1（条件分岐）で"yes"の場合
alias_name(no)	alias_name1（条件分岐）で"no"の場合

縦型のフローチャート例

flowchart.js にもサンプルがありますが、実際の記述と図形を見た方がわかりやすいかと思います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了
 
st->cd1
cd1(yes)->op1->sb1->cd2
cd1(no)->sb1->cd2
cd2(yes)->io1
cd2(no)->op2->io1
io1->e
```

下図は、Typoraで描画したフローチャートです。

横書きのフローチャート例

同じフローチャートを横書きにした例です。横方向に矢印を伸ばすために st(right)->cd1 のように (right) を使います。

``` flow
st=>start: 開始
op1=>operation: 処理1
op2=>operation: 処理2
cd1=>condition: 条件分岐1
cd2=>condition: 条件分岐2
sb1=>subroutine: サブルーチン
io1=>inputoutput: 出力 
e=>end: 終了
 
st(right)->cd1
cd1(yes)->op1(right)->sb1->cd2
cd1(no)->sb1(right)->cd2
cd2(yes)->io1
cd2(no, right)->op2->io1
io1->e
```

Typoraで描画するとこんな感じです。

まとめ

draw.ioなどでフローチャートを描いて画像で貼り付けてもいいのですが、Markdownのプレーンテキストの特徴を生かして flowchart.js でフローを描きましょう。同じくTyporaでサポートしているMermaidでもフローチャートを記述できますが、flowchart.jsの方がシンプルなフローで好きです。

Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。

Post Date：2019年7月21日　

TyporaでMarkdownを始めよう！

Markdownは、文章を記述するための軽量マークアップ言語でネット上で文章を共有するのに便利に使えます。拡張子は.mdですが、中身はテキスト文章なので軽量ですし、特殊なエディタやビューアーがなくても中身を確認できます。

IT技術者でなくてもブログの下書き、メモやレポートなどにも活用できます。

Markdown形式の特徴

シンプル
簡単な記号で書式を指定できるので、HTMLタグよりも100倍簡単です
書式が使える
Markdownは、表（テーブル）もあり、使える書式も文章を書く上で十分です。また、LaTeX, flow, sequence, mermaid をサポートしているので、数式、フローチャート、シーケンス図、ガントチャートなどもテキスト表記で描けます
互換性がある
MarkdownからHTML、Word形式、PDFなど他のフォーマットに変換できます

Markdownは、シンプルで書式が使えて、互換性があるだけではありません。何よりも キーボードから手を放さぜずに書けるというのは、文章を書く上でとても大切なことです。

Typoraは最強のMarkdownエディタ

多くのMarkdownエディタが、編集画面と表示画面の二画面で構成されていますが、Typoraは、WYSIWYG（What You See Is What You Get）なインターフェイスで、入力したものがそのまま描写されます。またフローチャート、シーケンス図、ガントチャートなどもコマンドベースで作成することができます。

更には、後述するGUIでの表（テーブル）機能のサポート、Excelなどからの表のコピペ、画像コピペなど、コマンドで面倒な部分はGUIでサポートしてくれます。Typoraは、Linux/Mac/Windowsで動作し、~~現在は、β版ということで無料で利用できます。~~

2021年11月に有料となり¥1,969（税込）です。クレジットカード/デビッドカード、PayPalで購入できます。（2022/1/31追記）

Typoraの特徴

軽量でシンプルなエディタ
WYSIWYGなインターフェイス
フローチャート、シーケンス図など図が描写できる
面倒なコマンドはGUIでサポート

と、とっても便利なTyporaです。いま時点で最高のMarkdownエディタだと思います。

TyporaでのMarkdown文法

Typoraは、下記の段落と改行以外については、標準のMarkdownに準拠しています。

段落と改行

ネット上で共有されている文章は、読み手の環境に依存するために改行はあまり使われていません。受けとったメールが変なところで改行されていて読みづらいと思ったことは、誰しもが経験したことがあるのではないでしょうか。

文章を読みやすくするためには段落を使います。HTMLではで文章を囲みますが、MarkdownではEnterを押して改行すると次の段落になります。Markdownでも改行はあり、半角スペース2つで改行なのですが、TyporaではSHIFT+ENTERで改行となります。

改行された
文章

Markdownの文法（目次）へ戻る

見出し

見出しは6段階です。＃の数が少ない方が大きな見出しとなり、htmlのh1からh6タグまでに相当しています。

# 見出し（h1）
## 見出し（h2）
### 見出し（h3）
#### 見出し（h4）
##### 見出し（h5）
###### 見出し（h6）

Sample

Markdownの文法（目次）へ戻る

文字を強調する

文字を *（アスタリスク）で囲むと斜体になります、アスタリスクふたつで囲むと太字で、三つで囲むとと斜体と太字の組み合わせとなります。

*斜体（イタリック）*
**太字**
***Bold & Italic***

Sample

Shatai(Italic)
太字
Bold & Italic

Markdownの文法（目次）へ戻る

打消し線

~（チルダ）2つで囲むと打消し線付きの文字となります。

~~打消し線~~

Sample

~~打消し線~~

Markdownの文法（目次）へ戻る

リンク

参照リンクは、[タイトル](URL)で記述します。

[象と散歩](https://walking-elephant.blogspot.com)

Sample

象と散歩

Markdownの文法（目次）へ戻る

画像

画像の差し込みは、参照リンクの記述と似ていますが、先頭に!（エクスクラメーション）を付けます。

![画像タイトル](画像URL)

で指定します。Typoraでは、![画像タイトル](まで入力するとURL指定とフォルダからの画像選択の両方を促す表示となります。WEB上の画像を利用するのであれば ”画像のURLを入力” にURLを指定し、ローカルに保存されている画像を使う場合は、フォルダアイコンをクリックして画像を選択します。

もっと簡単に画像をコピー&ペーストすることもできます。画像をコピペするとWindowsであれば、C:\Users\ユーザ名\AppData\Roaming\Typora\typora-user-images\ に画像が保存されます。

Markdownの文法（目次）へ戻る

引用

引用は > を使います。二重引用の場合は >> です。メールなどの引用符でも使いますから馴染みがあるかと思います。

> 象と散歩をするようにゆっくりとデータ解析やマーケティングについて考えて
> みようと思っていますが、物欲という雑念が払拭できません。
> 趣味のエギング、アクアリム、三線は永遠の初心者です。
>
> 【引用】[象と散歩](https://walking-elephant.blogspot.com)

Sample

象と散歩をするようにゆっくりとデータ解析やマーケティングについて考えてみようと思っていますが、物欲という雑念が払拭できません。趣味のエギング、アクアリム、三線は永遠の初心者です。

【引用】象と散歩

Markdownの文法（目次）へ戻る

コード

1行でコード（等幅フォントで整形）を記載する場合は、`（バッククォート）で囲みます。

`1+1=2`

複数行の場合は `（バッククォート）３つで括りますが、Typoraの場合、```で改行、若しくは、``` 言語名でコード入力用のボックスが生成されます。

``` gas
function myFunction() {
Browser.msgBox('hello, world!');
}

Markdownの文法（目次）へ戻る

注釈

文献を引用した場合や、補足説明をする場合に使う注釈は、[^注記号] と [^注記号]: 補足文 を使います。本文中の注記号にマウスオーバーすると補足文の内容が表示されます。

Sample

注釈のつけ方¹

1 注釈1の補足↩

Markdownの文法（目次）へ戻る

表（Table）

表（Table）は、各セルの内容を |（パイプ） で括ります。列は2列以上が必要で、最初の行はTable Header（TH）となり、2行目が表レイアウト、3行目からが、Table Data（TD）となります。2行目の表レイアウトは省略できます。

|TH1|TH2|TH3|
|----|----|----|
|TD1|TD2|TD3|

Sample

TH1	TH2	TH3
TD1	TD2	TD3

表の幅は100％（表示画面の最大）ですが、各セルの比率は、-（ハイフン）で変更することができます。またセル内の左揃え、中央揃え、右揃えは、:(コロン)で表します。

|左揃え|中央揃え|右揃え|
|:--|:----:|--:|
|TD1 |TD2 |TD3 |

Sample

左揃え	中央揃え	右揃え
TD1	TD2	TD3

Typoraの場合は、最初のヘッダー行のみ入力をしてエンターを押すと、表ツールが立ち上がるので、行、列の追加削除、文字位置などが簡単に行えます。

Typoraで表を作成

Markdownの文法（目次）へ戻る

水平線

水平線は、***, 若しくは、---で書きます。

Sample

Markdownの文法（目次）へ戻る

エスケープ

Markdown として意味がある記号の前に、\ を書くと文字をそのまま記述できます。

\*\*太字になりません\*\*

Sample

**太字になりません**

Markdownの文法（目次）へ戻る

Typora の文法サポート

Typoraでは、メニューバーの "ファイル(F) → 設定" で文法サポートの各項目をチェックすると、下付き、上付き文字、ハイライトがサポートされます（ダイアグラムについては別途説明）。

Typora文法サポート

下付き文字

下付き文字は、~（チルダ）で囲みます。

H~2~O

Sample

H₂O　

Markdownの文法（目次）へ戻る

上付き文字

上付き文字は、^（ハット）で囲みます。

X^2^

Sample

X²

Markdownの文法（目次）へ戻る

ハイライト

文字をハイライトするときは、=（イコール）ふたつで囲みます。

==ハイライト==

Sample

ハイライト

絵文字

Markdownでは、絵文字コードを :（コロン）で囲って、絵文字を埋め込めむことができます。しかし、絵文字コードを覚えるのは大変です。絵文字を使うのであれば、EMOJI CHEAT SHEET に絵文字の一覧があります。絵文字をクリックするとコードがコピーされるので便利です。但し、:simple_smile:などのいくつかの絵文字は使えませんでした。

:smile:
:sweat:
:cry:
:thumbsup:
:elephant:

Sample

😄😓😢👍🐘

Markdownの文法（目次）へ戻る

HTMLタグで文字装飾をする

TyporaではHTMLタグもそのまま記載できます。文字色ぐらいはMarkdownでも対応してもらいたいところですが、下線、文字色、文字寄せ、ルビ文字などは、HTMLタグで記述します。

HTMLで下線

下線はhtmlタグを使います。

<u>下線</u>

Sample

下線

Markdownの文法（目次）へ戻る

HTMLで文字色

文字色はhtmlタグを使います。

<font color="red">文字を赤色にする方法</font>
<font color="blue">文字を青色にする方法</font>
<font color="gray">文字を灰色にする方法</font>

Sample

文字を赤色にする方法
文字を青色にする方法
文字を灰色にする方法

Markdownの文法（目次）へ戻る

HTMLで文字寄せ

文字寄せは divタグの style属性を使います。

<div style="text-align: right;">
右寄せ
</div>
<div style=”text-aligh: center;”>
中央寄せ
</div>
<div style=”text-align: left;”>
左寄せ
</div>

Sample

右寄せ

中央寄せ

左寄せ

追記：2019.08 文字寄せについて追記しました。

Markdownの文法（目次）へ戻る

HTMLでルビ文字

ルビ文字はhtmlタグ<ruby>を使います。

<ruby>霰<rt>あられ</rt></ruby>

Sample

霰あられ

Markdownの文法（目次）へ戻る

LaTeXで文字装飾をする

Typoraの文法サポートでインライン数式をチェックするとLaTeXが使えます。LaTeXは、数式の記述や論文の体裁を整えるためのものですが、ちょっと構文が面倒です。[改訂第7版]LaTeX2ε美文書作成入門など書籍で勉強するか、LaTeXコマンド集を参照してください。

TyporaでLaTexを使うには、$（ダラー）で囲みます。複数行にまたがる場合は、$$で囲みます。

LaTexで数式

数式はこんな風に書きます。

$ \ce{CH4 + 2 $\left( \ce{O2 + 79/21 N2} \right)$} $

Sample

Markdownの文法（目次）へ戻る

LaTexで文字色

LaTeXを使って文字色を付けることもできます。

$ \textcolor{red}{文字色を赤色にする方法} $
$ \textcolor{blue}{文字色を青色にする方法} $
$ \textcolor{gray}{文字色を灰色にする方法} $

Sample

文字色を赤色にする方法
文字色を青色にする方法
文字色を灰色にする方法

Markdownの文法（目次）へ戻る

Markdownで図形も描ける

Typoraでは、文法サポートのダイアグラムをチェックしていると、フローチャート、シーケンス図、ガントチャートいった図形もプレーンテキストで表記することができます。こちらの記述方法については、別途、書きたいと思います。

簡単シンプルで色々できるMarkdownをTyporaで始めましょう。

Typora で Markdown シリーズ

Typora での Markdown の記述方法については、下記のシリーズで紹介しています。
参考にしてください。

Markdownライティング入門　プレーンテキストで気楽に書こう！

技術の泉シリーズ（NextPublishing）

楽天市場で調べる

Amazonで調べる

登録: 投稿 (Atom)

Translate

Markdown（Typora）でMindmapを描く！

Mermaidを使ってマインドマップを作成する

マインドマップの各ノードを描く

各ノードの形を変える

アイコンを使う

色の指定と配置はできない

円グラフを書く（おまけ）

LaTex で数式を書く最も簡単な方法

LaTexの基本は押さえておく

HostMathでLaTexを作成

σの二乗

分数の入力

Σの入力

（x-x̄）^2

完成した式（LaTex）をMarkdownで利用する

ブログで LaTex を使って式を書く

Markdown（Typora）でガントチャート

Typora でガントチャート

タイトル行

日付フォーマット

タスクの期間の記述方法

後続タスクの記述方法

タスクのステータスとクリティカルタスク

セクション

Typora で Markdown シリーズ

Markdown（Typora）でシーケンス図を描く！

文法サポートでダイアグラムをチェック

Markdownでシーケンス図を描く（js-sequence-diragrams）

js-sequence-diagrams のコマンド一覧

Markdownでシーケンス図を描く（js-sequence-diragrams）

sequenceDiagram(mermaid) のコマンド一覧

mermaid ではLoop処理が描ける

最後に

Typora で Markdown シリーズ

Markdown（Typora）でフローチャートを描く

文法サポートでダイアグラムをチェック

Markdownでフローチャートを描く

コマンドの記述方法

縦型のフローチャート例

横書きのフローチャート例

まとめ

Typora で Markdown シリーズ

TyporaでMarkdownを始めよう！

Markdown形式の特徴

Typoraは最強のMarkdownエディタ

TyporaでのMarkdown文法

段落と改行

見出し

リスト

文字を強調する

打消し線

リンク

画像

引用

コード

注釈

表（Table）

水平線

エスケープ

目次

Typora の文法サポート

下付き文字

上付き文字

ハイライト

絵文字

HTMLタグで文字装飾をする

HTMLで下線

HTMLで文字色

HTMLで文字寄せ

HTMLでルビ文字

LaTeXで文字装飾をする

LaTexで数式

LaTexで文字色

Markdownで図形も描ける

Typora で Markdown シリーズ

象と散歩：人気の投稿（過去7日間）

象と散歩：ブログ内の検索

象と散歩：