様々なブラウザやテキストエディタでMarkdownを表示させる

様々なブラウザ（Chrome, Firefox）やテキストエディタでMarkdownを表示する方法です。


# ブラウザ
## Chrome
1.[コチラ](https://chrome.google.com/webstore/detail/markdown-preview-plus/febilkbfcbhebfnokafefeacimjdckgl/related?hl=ja)より、「Markdown Preview Plus」を「Chromeに追加」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/af80b4e9-d20c-4413-be07-db44aa48488a.png)

2.「Markdown Preview Plus」を追加しますか?と聞かれるので、「拡張機能を追加」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/01e1dc67-dfeb-ddd8-b627-a4b7a759a33c.png)

3.「Google Chromeの設定」 > 「設定」（画面右方）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/6b67b44d-46de-a428-70f7-451b3b428baa.png)

4.「拡張機能」（画面左方）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/a8b6460d-bcd0-8bd6-7a17-22b76d4c5e19.png)

5.Chromeに読み込まれている拡張機能一覧が表示されるので、「Markdown Preview Plus」の「詳細」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/5178bd30-b4b5-77ee-963d-cd83e5051e4f.png)

6.「ファイルのURLへのアクセスを許可する」の右端のトグルをONにする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/bf657c26-f8c4-c9ea-0295-63fa48d2973b.png)

これで、Chromeで対象ファイルを読み込むと、Markdown表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/12eae0d2-5bcd-bbbc-3f2e-8c96a76f910a.png)


## Firefox
1.[コチラ](https://addons.mozilla.org/ja/firefox/addon/markdown-viewer-chrome/)より、「Markdown Viewer」を「Firefoxへ追加」します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/543bddab-cf71-8cc1-f676-27a4b748d922.png)

2.「Markdown Viewerを追加しますか？」と出るので、「追加」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/0249e7ce-8a45-0a89-d6af-6322111f2415.png)

3.「Markdown ViewerがFirefoxに追加されました。」と出るので、「OK」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/9185954f-cd2e-57fa-8a2b-6bc0b09c4ce3.png)

4.ブラウザより、「メニュー」>「アドオン」（画面右方）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/841f9e29-8234-369f-7c75-837e5e3026c5.png)

5.「拡張機能」を選択し、Markdown Viewerの右端の「・・・」 > 「管理」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/85b78bf0-a242-b33e-a2bf-0d7d7c46c2c2.png)

6.「オプション」タブに移動し、「ALLOW ALL」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/e1eabea3-8e1f-2194-6780-e560f4dbe9ec.png)

7.「Markdown Viewerが追加の許可を必要としています。」と出るので、「許可」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/c0a4b6e0-bb16-34b9-b659-fa1dbaa3cc63.png)

これで、Firefoxで対象ファイルを読み込むと、Markdown表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/356958/57fdacfa-1ae0-f390-9f03-f50b8289a37e.png)



## テキストエディタ
続いて、テキストエディタです。
可能な範囲で方法を記載しました。
（不明なものは「-」と記載しています。後日分かったらアップします。悪しからず・・・）

### Windows / Mac両方対応
|テキストエディタ名|Markdownを表示する方法|
|---|---|
|[Atom](https://atom.io/)|Ctrl(Command)+Shift+M|
|[Visual Studio Code](https://code.visualstudio.com/)|1. ファイル名が表示されているタブを右クリック<br>2. Open Preview|
|[MarkRight](https://github.com/dvcrn/markright)|-|
|[HarooPad](http://pad.haroopress.com/)|-|
|[Brackets](http://brackets.io/)|拡張機能「Markdown Preview」のインストールにより可能 → 手順は[コチラ](https://qiita.com/C_HERO/items/baac09337f398b244843)|
|[Sublime Text](https://www.sublimetext.com/)|「OmniMarkupPreview」というプラグインを入れると可能 → 手順は[コチラ](https://pisuke-code.com/sublime-plugin-markdown-preview/#OmniMarkupPreview-2)|

### Windowsのみ
|テキストエディタ名|Markdownを表示する方法|
|---|---|
|[MarkDown#Editor](http://hibara.org/software/markdownsharpeditor/)|左のウィンドウにテキストファイルを読み込むと右ウィンドウにリアルタイムに表示|
|[Mery](https://www.haijin-boys.com/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8)|-|

### Macのみ
|テキストエディタ名|Markdownを表示する方法|
|---|---|
|[MacDown](https://macdown.uranusjr.com/)|手順は[コチラ](https://yuu.1000quu.com/recommended_free_mac_app_macdown)|
|[Mou](http://25.io/mou/)|-|
|[Chocolat](https://chocolatapp.com/)|-|



## 参考
- [Markdownで記述した文書をブラウザで表示する | Small Office & Simple IT](https://usado.jp/spdsk/2018/02/23/post-3323/)
- [【無料】MacでMarkdownならこれしかない！MacアプリMacDown | Yuuの悠々自適Blog](https://yuu.1000quu.com/recommended_free_mac_app_macdown)
- [Markdownで記述できる無料のテキストエディタ15選 | UX MILK](https://uxmilk.jp/43199)