📝

Markdown Viewerのインストールと設定について

2023/08/10に公開

Markdown ViewerとはChrome, Edgeなどのブラウザでmarkdownをプレビューすることができる拡張機能である。
Githubテーマなどがあるので普段見慣れた体裁でmdファイルをプレビューできる。
この拡張機能をインストールしてもらえればmdエディタ・ビューワ環境がない人にわざわざpdf変換してから展開する手間を省略することができる。


インストール方法

以下からインストール。
https://chrome.google.com/webstore/detail/markdown-viewer/ckkdlimhmcjmikdlpkmbgfkaikojcbjk?hl=ja
上記リンクをEdgeで開くことでEdgeでもインストールすることができる。


ローカルファイルをブラウザ上で表示

  1. 画面上部の拡張機能アイコンを右クリック
  2. 拡張機能を管理をクリック
  3. ファイルをのURLへのアクセスを許可するをクリック

これでmdファイルをブラウザにドラッグアンドドロップすることでプレビューすることができる。


mdファイルをダブルクリックでブラウザ上でプレビュー

  1. 適当なmdファイルで右クリック
  2. プログラムから開く -> 別のプログラムを選択をクリック
  3. 指定のブラウザを選択した状態で常にこのアプリを使って.mdファイルを開くのチェックボックスにチェックを付けて開く

プレビューテーマの選択

  1. 画面上部の拡張機能アイコンをクリック
  2. THEMEタブから適当なテーマを選択(GITHUBがおすすめ)

行の変更をプレビュー上で改行と認識させる

本来マークダウンにおいて改行は行末に半角スペース2つか<br>を記入する必要があるが、以下の設定をすることでmdファイル内の改行コードを<br>と解釈し、プレビュー上でも改行表示することができる。

  1. 画面上部の拡張機能アイコンをクリック
  2. COMPILERタブをクリック
  3. breaksをONにする

ただし、gitlabなどは改行コードで改行判定はされないの仕様のため、上記設定のままgitlabにアップロードすると意図した箇所で改行が行われない。
gitlabにアップロードする前提でプレビューを確認する場合はbreaksをOFFにしてプレビューすること。


ローカルファイル更新時にブラウザ側のプレビューを自動更新させる

  1. 画面上部の拡張機能アイコンをクリック
  2. CONTENTタブをクリック
  3. autoreloadをONにする

reference

Discussion