Markdownで記述した文書をブラウザで表示する

Markdownで記述した文書をブラウザで表示するにはブラウザのAdd-onが必要

Markdownを用いて書いた文書はMarkdownのプレビュー機能があるテキストエディタを使用しないとMarkdownを読み取って表示することができません。
テキストエディタは使い勝手になれているものを使っていると思いますので、簡単に参照するにはブラウザで読み込むことで表示します。ただ、そのままでは単なるテキストがブラウザに表示されて、Markdownをブラウザで参照するにはAdd-onのインストールが必要になります。

Add-onなしだと以下のような表示
markdown
ここで上げているAdd-on以外にも同様のAdd-onはあります。特にFirefoxの場合だとバージョンによって使えないAdd-onなどもありますので、使用しているバージョンなどで探してみてください。

ChromeにAdd-onを追加

  1. ChromウェブストアのMarkdown Preview Plusのページを開きます
  2. https://chrome.google.com/webstore/detail/-preview-plus/febilkbfcbhebfnokafefeacimjdckgl?hl=ja

  3. [Chromeに追加]ボタンをクリックします
  4. markdown

  5. [拡張機能を追加]ボタンをクリックします
  6. markdown

  7. 拡張機能の追加が完了
  8. markdown

  9. Markdown Preview Plusアイコンを右クリックして[拡張機能の管理]を選択します
    [その他のツール]→[拡張機能]からも管理画面を表示できます
  10. markdown

  11. [ファイルのURLへのアクセスを許可する]のチェックをONにします
  12. markdown

  13. Markdown文書をドラッグ&ドロップで開いてみます
  14. markdown

Markdownが解析されて表示されましたでしょうか?

Markdown Preview Plus設定を変更

  1. Markdown Preview Plusの設定を開きます
    前項の[Option]リンクをクリックしてもOK
  2. markdown

  3. [Option]リンクをクリックします
  4. markdown

  5. オプション設定画面でMarkdown Preview Plusの設定をします
    単に開くだけならデフォルト設定でも大丈夫です
  6. markdown

  7. 対応する拡張子を設定するには下記でチェックのON/OFFをします
  8. markdown

FirefoxにAdd-onを追加

  1. Add-onのサイトを開きます
    当検証環境では訳があって最新版ではありませんのでhttps://addons.mozilla.org/ja/firefox/addon/markdown-viewer/を使用してみます
  2. https://addons.mozilla.org/ja/firefox/addon/markdown-viewer-chrome/
    https://addons.mozilla.org/ja/firefox/addon/markdown-viewer-webext/
    https://addons.mozilla.org/ja/firefox/addon/markdown-viewer/

  3. [Firefoxへ追加]ボタンをクリックします
  4. markdown

  5. [インストール]をクリックします
  6. markdown

  7. インストール完了したらFirefoxを再起動します
  8. Markdown文書をドラッグ&ドロップで開いてみます
    拡張子は.mdにしておきます
  9. markdown

markdown-viewer-webextも使えました。
https://addons.mozilla.org/ja/firefox/addon/markdown-viewer-chrome/

インストールも使い方もほぼ同じでした。

スポンサーリンク
spdsk-side
spdsk-side