LoginSignup
8
7

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-18

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

ブラウザ

Chrome

1.コチラより、「Markdown Preview Plus」を「Chromeに追加」します。
image.png

2.「Markdown Preview Plus」を追加しますか?と聞かれるので、「拡張機能を追加」をクリック
image.png

3.「Google Chromeの設定」 > 「設定」(画面右方)
image.png

4.「拡張機能」(画面左方)
image.png

5.Chromeに読み込まれている拡張機能一覧が表示されるので、「Markdown Preview Plus」の「詳細」をクリック
image.png

6.「ファイルのURLへのアクセスを許可する」の右端のトグルをONにする
image.png

これで、Chromeで対象ファイルを読み込むと、MarkDown表示されます。
image.png

Firefox

1.コチラより、「Markdown Viewer」を「Firefoxへ追加」します。
image.png

2.「Markdown Viewerを追加しますか?」と出るので、「追加」をクリック
image.png

3.「MarkDown ViewerがFirefoxに追加されました。」と出るので、「OK」をクリック
image.png

4.ブラウザより、「メニュー」>「アドオン」(画面右方)
image.png

5.「拡張機能」を選択し、Markdown Viewerの右端の「・・・」 > 「管理」をクリック
image.png

6.「オプション」タブに移動し、「ALLOW ALL」をクリック
image.png

7.「Markdown Viewerが追加の許可を必要としています。」と出るので、「許可」をクリック
image.png

これで、Firefoxで対象ファイルを読み込むと、MarkDown表示されます。
image.png

テキストエディタ

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

Windows / Mac両方対応

テキストエディタ名 MarkDownを表示する方法
Atom Ctrl(Command)+Shift+M
Visual Studio Code 1. ファイル名が表示されているタブを右クリック
2. Open Preview
MarkRight -
HarooPad -
Brackets 拡張機能「Markdown Preview」のインストールにより可能 → 手順はコチラ
Sublime Text 「OmniMarkupPreview」というプラグインを入れると可能 → 手順はコチラ

Windowsのみ

テキストエディタ名 MarkDownを表示する方法
MarkDown#Editor 左のウィンドウにテキストファイルを読み込むと右ウィンドウにリアルタイムに表示
Mery -

Macのみ

テキストエディタ名 MarkDownを表示する方法
MacDown 手順はコチラ
Mou -
Chocolat -

参考

8
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
7