LoginSignup
1
0

More than 5 years have passed since last update.

Chrome + Markdown Viewer + LiveReloadでリアルタイムにMarkdownをプレビューする

Last updated at Posted at 2018-03-17

自分はatomでMarkdownを書いているのですが、atomでもSublime TextのOmniMarkupPreviewerのようにブラウザでリアルタイムプレビューができないか試したところChromeと以下の拡張機能を使えば(一応)できました。
ちなみに、atomのプレビューでもいいんですがマルチモニターの場合、他のモニターにプレビュー画面を出して見た方が個人的に見やすかったのでやってみました。

試した環境

項目 バージョン
MacOS Sierra 10.12.6

Markdown Viewer

Markdown Viewer

ChromeでMarkdownをプレビューするための拡張機能です。
他だとMarkdown Preview Plusなどもありますが、こっちのスタイルの方が個人的に好きだったので使っていきたいと思いました。

表示例

Markdown Viewer例

ただし、自動更新の機能は標準でありませんでした。

LiveReload(App Store)

LiveReload

ファイルを更新したらブラウザをリロードしてくれるツールです。
ツールの構成は、ファイルの変更をモニタリングするサーバとファイルが変更されたらブラウザを更新するjavascriptです。
今回は、1,200円払ってApp StoreからLiveReloadを購入しました。

最初に試した環境

Chrome/LiveReload/Chrome Markdown Viewer,LiveReload

最初に試したのは

  • Chrome
  • LiveReload(App Store)
  • Chrome拡張機能のMarkdown Viewer
  • Chrome拡張機能のLiveReload

です。
ただ、このやり方でやった時にうまくブラウザが更新されなかったり表示が崩れたりと安定しませんでした。
Chromeのデベロッパーツールで確認すると、どうもChrome拡張のLiveReloadがMarkdown PreviewでHTMLコードを生成する時に更新するためのjavascriptが入ったり入らなかったりしていました。
そのため、最初は更新されていても途中から更新されないという事象が頻発して使い物にならず...
それで思いついたのが拡張機能を直接修正して更新用javascriptを埋め込むようにすればいいのでは?ということでやってみました。

一先ず動くようになった環境

  • Chrome
  • LiveReload(App Store)
  • Chrome拡張機能のMarkdown Viewer(ソース改修)

Markdown Viewerの拡張ツールは以下に保存されています。

/Users/$USER/Library/Application Support/Google/Chrome/Default/Extensions/xxxxxxxxxxxxx/$VERSION/content/content.js

Markdown Viewerのソースを以下のように改修しました。

--- before/content.js   2018-03-17 23:15:33.000000000 +0900
+++ after/content.js    2018-03-17 23:15:23.000000000 +0900
@@ -75,6 +75,7 @@
     },
     view: () => {
       var dom = []
+      dom.push(m('script', { src: 'http://127.0.0.1:35729/livereload.js?snipver=1' }))

       if (state.raw) {
         dom.push(m('pre#_markdown', {oncreate: oncreate.markdown}, state.markdown))

これで、ファイルを更新すれば自動でブラウザが更新してくれるようになりました :-)
このやり方は拡張機能をバージョンアップすると変更した部分が消えてしまいます。

課題

tocについて

toc機能が見やすくて好きなのですが、日本語の場合クリックしてもうまく動作してくれません。
頭の文字が英字だと動いてくれます。

時々プレビューが失敗

時々、レンダリングがうまくいかず生のmdフィアルが表示されます。
原因はちょっとわからないですが、ブラウザの更新をして回避しています。。。

1
0
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
1
0