強力なMarkdownエディタ「Typora」に今更入門

# 最初に

どうも、ろっさむです。

本記事は現在β版として無料の強力なMarkdowエディタ「Typora」についての入門記事となっています。TyporaはMarkdownエディタツールとして比較的敷居も低く、便利機能も豊富に存在するため、初心者から上級者までお勧めができるエディタであると思います。Typoraを使いこなしサクサクとMarkdownを書けるようになりましょう。

エディタ自体を使いこなし文章化する速度が上がれば、よりエネルギーを消費せずに作業を進めることができます。

ただ公式のクイックスタートに記載されているショートカット表が更新されていないのか度々動作しないことがあるため、今回自分のためにもまとめておくことにしました。

# Typoraの特徴

- Typoraは**常時シームレスにプレビューが可能**なため、どのような表示になるのか確認しながら直感的に記述をすることが可能。
- **Win、Mac、Linuxで導入可能**。
- 校正機能があり、**スペルや文法のチェックをしてくれる**。
- 括弧などの**Markdownシンボルを自動ペアリング**してくれる。
- 約100の言語をサポートし、**構文ハイライトに対応**。
- **機能とショートカットキーが豊富**なため、痒いところにも手が届く。
- **インライン数式、ディスプレイ数式に対応**。数式はライブプレビューもできる。
- 画像も楽々挿入可能(書き込み時に画像が表示される)。
- PDF、LaTeX、HTMLなど**様々なフォーマットでエクスポートが可能**。
- 自分の好みに合わせて**見た目(テーマ)を変更することができる**。
- オートセーブ、リカバリーをサポートしている。
- フォーカスモード、タイプライターモード、ソースコードモードがあり、個人の好みによって切り替えが可能。
- アウトラインパネルによってドキュメント内を素早く移動できる。
- 文字数や行数、単語数を即座に確認することが可能。
- 簡単な**シーケンス図を作成可能**。



# スペック要件

Typoraは以下の環境で動作します。

- Windows：7、8、10が必要。x86、x64サポート。
- MacOS：10.13以上。それ以下の場合はTyporaのバージョン0.9.9.26であれば使用可能。
- Linux：Ubuntu 16.04及び18.04



# Typoraの機能とショートカットキー

## Markdownの記述

Typoraは自動ペアリング機能が備わっているため、[ ** ] や [ ``` ]を書いた時点で自動補完されます。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">「Typora」っていうMarkdownエディタが存在することを今初めて知った。記述した直後にシームレスでプレビュー表示状態になってくれてすごく確認しやすい…！<br><br>画像もクリップボードにコピーしたものをそのままペーストして確認できる。ショートカットコマンドも豊富だし使いやすい。テーマも選べる！ <a href="https://t.co/GLFGsXumUy">pic.twitter.com/GLFGsXumUy</a></p>&mdash; 新生ろっさむ@垢ロックで作り直し (@Ev_rossam) <a href="https://twitter.com/Ev_rossam/status/1171792423384543232?ref_src=twsrc%5Etfw">September 11, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>



### 段落と改行

| 機能 | Win/Linuxキー  | MacOSキー      |
| ---- | -------------- | -------------- |
| 段落 | Enter          | Enter          |
| 改行 | Shift + Return | Shift + Return |



### ヘッダー

行の先頭に#をつけることでH1〜H6まで作成することが可能。

| 機能                   | Win/Linuxキー | MacOSキー    |
| ---------------------- | ------------- | ------------ |
| 数値に対応したH1〜H6   | Ctrl + (1〜6) | Cmd + (1〜6) |
| ヘッダーレベルを上げる | Ctrl + +     | Cmd + ^      |
| ヘッダーレベルを下げる | Ctrl + -      | Cmd + -      |



### フォーマット

文字自体の表示を変更することができます。

- **太字表現**
- *強調表現*
- <u>下線あり</u>
- [リンク付き(リンク先は私のTwitter垢です)](https://twitter.com/Ev_rossam)
- ~~打ち消し線~~ ：[ ~~ ]で文字を囲っています。

以下に関しては「設定」>「Markdown」>「文法サポート」で有効にした場合、反映されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/daea85c6-8ffa-f3e4-d45a-54d9ccd8d66f.png)


| 機能           | Win/Linuxキー | MacOSキー |
| -------------- | ------------- | --------- |
| 太字表現       | Ctrl + B      | Cmd + B   |
| 強調表現       | Ctrl + I      | Cmd + I   |
| 下線           | Ctrl + U      | Cmd + U   |
| ハイパーリンク | Ctrl + K      | Cmd + K   |



### コードブロック

記事内に[ ``` ]と記入することで**コードブロック**を挿入することが可能です。また、先頭の記号の後に言語名を入れることで、（その言語がサポートされていれば）シンタックスハイライトが適用されます。

```c++
int hoge = 10;
```

| 機能       | Win/Linuxキー  | MacOSキー        |
| ---------- | -------------- | ---------------- |
| コード挿入 | Ctrl + Shift + K | Cmd + Option + C |



### 引用

「>」文字を先頭につけることで**引用ブロック**が作成されます。

> これが引用ブロックです。



### リスト

[ - ]又は[ * ]を文の先頭につけることで**通常のリスト**が作れます。

- Hoge
- Piyo
  - インデントPiyo

また、[1.]を文の先頭につけることで**順序付きリスト**を作成できます。

1. Hoge
   1. インデントHoge
2. Piyo

[ - [ ] ]と記述することで**タスクリスト**も作ることができます。[x]とすることでチェック付きの表示となります。

- [ ] タスク
- [x] 完了タスク

| 機能           | Win/Linuxキー    | MacOSキー        |
| -------------- | ---------------- | ---------------- |
| 順不同リスト   | Ctrl + Shift + ] | Cmd + Option + U |
| 順序付きリスト | Ctrl + Shift + [ | Cmd + Option + O |
| タスクリスト   |   なし？  | Cmd + Option X   |
| インデント     | Tab              | Tab              |
| アウトデント   | Shift + Tab      | Shift + Tab      |



### 数式の挿入

数式を[ $ ]で挟むことで**インライン数式**を書くことができます。

（例：$X^2$←こんな感じです）

数式（LaTeX）を[ $$ ]で挟むことで**ディスプレイ数式**を書くことができます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/8940a9af-29ea-3fc8-5e5c-0813c5a38c4d.png)


```
$$
\mathbf{V}_1 \times \mathbf{V}_2 =  \begin{vmatrix}
\mathbf{i} & \mathbf{j} & \mathbf{k} \\
\frac{\partial X}{\partial u} &  \frac{\partial Y}{\partial u} & 0 \\
\frac{\partial X}{\partial v} &  \frac{\partial Y}{\partial v} & 0 \\
\end{vmatrix}
$$
```
尚、Qiitaなどではコードブロックにてmathを指定し記述することでも、ディスプレイ数式となります。

```math
\left( \sum_{k=1}^n a_k b_k \right)^{!!2} \leq
\left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)
```



| 機能             | Win/Linuxキー    | MacOSキー        |
| ---------------- | ---------------- | ---------------- |
| 数学ブロック挿入 | Ctrl + Shift + M | Cmd + Option + B |



### テーブルの作成

列と行を指定してテーブルを作成することができます。作成したテーブルはTypora上でテーブル編集時に表示されるツールチップを使う事で簡単にリサイズを変更する事ができます。

![Table01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/af5e80a6-d83d-2ed9-41e4-87a1ee89b912.gif)


また、WYSIWYNG機能によって行/列の並び替えも簡単に行う事ができます。

![Table入れ替え.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/7963f38a-5e0b-41f9-397d-745669a99aca.gif)




| 機能                 | Win/Linuxキー            | MacOSキー               |
| -------------------- | ------------------------ | ----------------------- |
| テーブル作成         | Ctrl + T                 | Cmd + Option + T        |
| 行の選択             | Ctrl + L                 | Cmd + L                 |
| 現在のセル内を選択   | Ctrl + E                 | Cmd + E                 |
| 行の追加(行末で行う) | Ctrl + Enter             | Cmd + Enter             |
| 行の削除             | Ctrl + Shift + Backspace | Cmd + Shift + Backspace |



### 脚注

[^xxx]と書くことで脚注をつける事ができます。脚注内容は脚注にカーソルを合わせると脚注内容が表示されます。

: 君死にたまふことなかれ[^1]

[^1]: 著者：与謝野晶子



### 水平線の追加

[ *** ]か[ --- ]を入力してEnterを押下する事で水平線が描画されます。

------



### 目次の追加

[toc]と入力してEnterを押下する事で目次が追加されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/94f7da54-17a8-c03b-78f4-32f8c110f787.png)



## Typoraの操作

### 基本操作に便利なショートカットキー

| 機能                     | Win/Linuxキー    | MacOSキー       |
| ------------------------ | ---------------- | --------------- |
| 新しいウィンドウを開く   | Ctrl + N         | Cmd + N         |
| 新しいタブを開く         | サポートなし     | Cmd + T         |
| ファイルを開く           | Ctrl + O         | Cmd + O         |
| 閉じたファイルを再度開く | Ctrl + Shift + T | Cmd + Shift + T |
| 名前をつけて保存         | Ctrl + Shift + S | Cmd + Shift + S |
| 設定を開く               | Ctrl + ,         | Cmd + ,         |
| 閉じる                   | Ctrl + W         | Cmd + W         |
| 先頭にジャンプ           | Ctrl + Home      | Cmd + ↑         |
| 選択箇所にジャンプ       | Ctrl + J         | Cmd + J         |
| 末尾にジャンプ           | Ctrl + End       | Cmd + ↓         |
| 検索                     | Ctrl + F         | Cmd + F         |
| ズームイン               | Ctrl + Shift + ; | Cmd + Shift + ; |
| ズームアウト             | Ctrl + Shift + - | Cmd + Shift + - |



### サイドバーについて

フォルダ内にある文書一覧を表示する「リスト表示」と、現在開いているファイルの階層構造を表示する「アウトライン表示」を切り替えて確認する事ができます。

アウトライン表示では、任意の見出しをクリックする事で素早くその位置まで移動する事が可能です。

| 機能                          | Win/Linuxキー    | MacOSキー        |
| ----------------------------- | ---------------- | ---------------- |
| サイドバー表示/非表示切り替え | Ctrl + Shift + L | Cmd + Option + L |
| リスト表示へ                  | Ctrl + Shift + 1 | Cmd + Ctrl + 1   |
| アウトライン表示へ            | Ctrl + Shift + 2 | Cmd + Ctrl + 2   |
| ファイルツリー                | Ctrl + Shift + 3 | Cmd + Ctrl + 3   |



### モード切り替え

Typoraでは、よりユーザーが集中して文章を書く事ができるように、いくつかのモードを用意しています。

- **ソースコードモード**：プレビューモード（default）で書いた内容を、ソースコード表示にして確認する事ができます。また、そのまま編集することも可能です。
- **フォーカスモード**：現在の行またはブロック以外の文章を暗くすることで、現在編集している箇所にのみ視点を集中しやすくなります。
  ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/1f349bd8-43a1-66f8-5cee-e7192102db65.png)

- **タイプライターモード**：メカニックタイプライターの動作を模倣します。編集している箇所が常にTyporaの作業ウィンドウの真ん中に位置されるよう固定されます。

| 機能                 | Win/Linuxキー | MacOSキー |
| -------------------- | ------------- | --------- |
| ソースコードモード   | Ctrl + /      | Cmd + /   |
| フォーカスモード     | F8            | F8        |
| タイプライターモード | F9            | F9        |



### テーマの切り替え

Typoraにはいくつかテーマがあり、それらはメニューバーから変更する事が可能です。個人的にはNightがオススメです（暗くて目が疲れにくいので）。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/05db09f0-0790-899c-6e14-a9d0c1d4c343.png)


### スペルチェックについて

Typoraにはスペルチェック機能があり、「Edit」からスペルチェックの機能を有効/無効に切り替える事ができます。とても便利な機能なので有効にしておいてもいいかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/7df190b9-c587-9a1d-60d0-fa074a938af3.png)
 
![9月-16-2019 00-40-08.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/60e290c3-65ef-27a8-e862-c0cf763fec42.gif)


### 図の作成

コードブロックにて[ sequence ]を指定して記述する事で**シーケンス図**が作れます。
※コードは公式チュートリアルより引用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/ce20d5b2-14a8-7476-446c-f1fbfac2fb9e.png)

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



また、コードブロックにて[ flow ]を指定して記述する事で**フローチャート**を作ることも可能です。
※コードは公式チュートリアルより引用

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/36899/ba21bba4-a135-aa01-5ae1-266bba6bcddc.png)


```flow
st=>start: Start
op=>operation: Your Operation
cond=>condition: Yes or No?
e=>end

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

この他にもガントを作成することもできます。
※画像は公式チュートリアルより引用

![Snip20160816_5](http://support.typora.io/media/diagrams/Snip20160816_5.png)



### HTMLの埋め込み

HTMLを埋め込んで文字の色を変更することも可能です。

```
<span style="color:red">赤文字</span>
```

ここではそこまで掘り下げませんが、使う人はがっつり使うと思います。



# 最後に

今まではVSCodeを使ってMarkdownを書いていましたが、このTyporaも記事執筆用のツールとしてはとても良い選択肢であると知り、今後はこちらも使って行こうかなと考えています。この記事が皆さんのアウトプットに関する作業効率を上げるためのツール選びに参考と慣れれば幸いです。そして皆でTyporaを使って一人アドカレをしましょう。わいわい。