📡

好きなエディタでMarkdownをプレビューするためのLive Reloadサーバを立てるコマンドをGoで作った

2021/11/11に公開

この記事のタイトル、舌を噛みそう。

gitlab.com/fj68/md-dev-serverというMarkdown用のLive ReloadサーバをGoで作りました。
Markdownファイルを編集して保存すると、変更を検知して自動でブラウザがリロードされます。
コマンド一つで立ち上がるシンプルな作りです。

screenshot

ttydという「ターミナルをブラウザから操作できるツール」とVivaldiタイル表示機能を使うことで、VS CodeのMarkdownプレビューのようなことが実現できます。
この記事の執筆にも使っています。

仕組み

  1. MarkdownファイルをHTMLにレンダーする
  2. レンダーしたファイルを配信するサーバを立てる
  3. Live Reloadサーバを立てる
  4. Markdownファイルの変更を監視し、変更があれば再レンダーしてLive Reloadサーバに通知する

201行のめちゃくちゃ小さなプログラムなので、ソースを読む方が早いかもしれません。

技術選定

サーバを2つ立ち上げる必要があるので、簡単に並行処理できるGoを選びました。

Live Reloadサーバはgithub.com/jaschaephraim/lrserverというライブラリを見つけました。
ファイル配信サーバの方は標準のnet/httpパッケージです。Markdownパーサはgithub.com/yuin/goldmark、ファイル監視はgithub.com/fsnotify/fsnotifyです。
……特にひねりもなく普通ですね。

コマンドライン引数のパース、ロガー、テンプレートの処理も標準のパッケージで十分でした。
Goの標準ライブラリには代替となるライブラリも多いですが、標準ライブラリでまかなえるものはできるだけ標準ライブラリを使うようにしています。

テンプレートにhtml/templateではなくtext/templateを使っているのはHTMLのサニタイズを回避するためです。
「レンダー後のHTMLは安全だろう」ということでそのままテンプレートに突っ込んでます。

「Markdownを書くときはおおよそREADMEを書くとき」という著しい偏見に基づき、デフォルトでGFMに対応し、CSSはGitHubのものを適用するようにしています。
テンプレートを指定すれば、スタイルを好きなようにいじったりコードをハイライトすることもできます。

なんで作ったの

いろいろなエディタ(特にCUIのエディタ)にプレビュー機能を後付けできたらいいなと思ったためです。
Markdown専用のエディタはたくさんありますし、VS Codeのプレビュー機能で十分なんですが、もっと軽いエディタで書きたいなぁと感じていました。
ReactやVueなどフロントエンド開発のときに使うLive Reloadが便利すぎて鼻血が出るので、Markdownでもこれでええやんと思って作ってみたら便利でした。

CLIツールを作るときは、できるだけ機能を絞って「一つのことをうまくやる」コマンドにすることを大事にしています。
これによってどんなエディタ、どんなブラウザにも(原理的には)対応できるようになりました。

1ヶ月くらい前に作ってちょいちょい使っていたのですがわりかし便利なのでみんなに使ってもらおうと記事を書いてみました。
なんかおもしろい使い方を見つけた方は教えてください。

Discussion