たびとの旅路 ~電脳砂漠の冒険譚~

フロッピー頼りに歩き、クラウドの地平を見つめる今日まで。見つけたオアシス、迷い込んだ砂の迷宮、全てこの羊皮紙に。

砂漠の古文書を読む技法 ─ glowとMarkTextが変えたMarkdownとの対話

電脳砂漠では、至るところに古文書(Markdownファイル)が転がっている。ターミナルでリポジトリを覗けばREADMEがあり、メモはMarkdownで取り、設計書もMarkdownで書く。羊皮紙は豊富にあるのに、それを快適に「読む」「書く」術を、私たちはあまりにも長いこと持っていなかった。

WSL2のターミナルで長大なREADMEを cat で開き、記号まみれの生テキストを目で追う――その無駄な消耗に終止符を打った神器が glow だ。そしてMarkdownを書く場面では、WYSIWYGエディタの MarkText が、VS Codeの分割プレビューという「当たり前」を過去のものにした。

旅の途中で古文書(README.md)が必要になる瞬間は、必ず来る。長大な説明書の中から目的の呪文(コマンド)を探し出す作業は、本来、5秒で終わるはずのことだ。しかしターミナルの生テキストは容赦なく、その5秒を5分に変える。一方で、羊皮紙を書くとき――VS Codeのプレビューを横に開くか、あるいは完成形を想像しながら記号を打ち続けるか。どちらも、本質的な作業を妨げる「ノイズ」に変わりない。今日の羊皮紙は、その二つのノイズを取り除いた、静かな話だ。

この羊皮紙のあらまし

この羊皮紙が導く者

  • WSL2やLinux環境でターミナル作業をしている開発者
  • cat README.md の見づらさを「当たり前」として受け入れていた人
  • Markdownを書くときに、VS Codeの分割プレビューで不便を感じている人
  • Notionのような「見たままの感覚」でMarkdownを編集したい人
  • GitHubからクローン後、READMEを素早く確認したい人

砂漠の道標

  • Markdown - テキストに記号を付けることで書式を表現する軽量マークアップ言語。技術文書の事実上の標準。
  • README.md - ソフトウェアのリポジトリに置かれる説明書。慣習的にMarkdownで書かれる。
  • WSL2 - Windows上でLinuxを動かす仮想化技術。Windows Subsystem for Linux 2の略。
  • glow - ターミナル上でMarkdownをレンダリングして表示するCLIツール。Charm社製。
  • MarkText - WYSIWYGを採用したオープンソースのMarkdownエディタ。
  • WYSIWYG - "What You See Is What You Get"。編集中に最終的な見た目がそのまま表示される形式。
  • シンタックスハイライト - コードや構文要素を色分けして視覚的に区別する表示機能。
  • Mermaid.js - テキストでフローチャートやシーケンス図を記述するライブラリ。Markdown内に埋め込める。

二つの神器 ─ glowとMarkText

Markdownは電脳砂漠の共通言語だ。GitHubの書庫を覗けば必ずREADMEがあり、ドキュメントはMarkdownで記され、メモもMarkdownで取る。書くのは簡単だが、「読む」と「書く」の体験はツールによって天と地ほど違う。その事実に、私は随分と遅れて気づいた。

glow ─ ターミナルに灯をともす神器

WSL2やLinuxのターミナルで作業していると、README.mdを確認したい瞬間が頻繁に訪れる。そのたびに選択肢は二つだった。cat README.md で生テキストを目で追うか、VS Codeという大きな器(エディタ)を起動するかだ。

前者を選ぶと、こういう惨状になる。

catコマンド

いつも通りの見辛さ。

#** が至るところに散在し、本来であれば見出しや強調として表示されるべき情報が、ただの記号として重なっている。長文のREADMEで目的のセクションを探すのは、砂嵐(ノイズ)の中で地図を読もうとするようなものだ。

glow は、このノイズを取り除く。インストールは一行の呪文(コマンド)で終わる。

sudo apt install glow

あとは glow README.md と打てばいい。見出しは見出しとして、コードはコードとして、シンタックスハイライト付きで表示される。

glowコマンド

ハイライト表示されていて、見やすい

長文のREADMEにコマンドや設定が散在していても、目的の内容へ素早く辿り着ける。GitHubからクローン直後にREADMEを確認する作業が、ストレスゼロになった。

less のようにページャーとして使いたい場合は -p オプションを付ける。

glow -p README.md

方向キーでスクロールし、q で終了する。less と同じ操作感で、長文でも快適に読み進められる。

MarkText ─ 「見たまま」で羊皮紙を紡ぐ神器

「書く」側の問題も、長いこと放置していた。

VS Codeで CTRL + SHIFT + V を押して、左にエディタ、右にプレビューという分割表示で執筆する。これが私の定番スタイルだったが、GitHubの複数リポジトリを同時に編集するようになると、MarkdownファイルとコードファイルがVS Codeのタブに混在して、かえって混乱を招くようになった。

そこで試したのが MarkText だ。

見たまま編集(WYSIWYG)

MarkText

ほとんど、見たままの状態で編集することができる

WYSIWYGの編集体験は、Notionに近い。# を打てば即座に見出しになり、** で囲えばそのままボールドになる。記号が視覚的ノイズとして残らないため、内容の構造が一目で把握できる。VS Codeよりも圧倒的に見やすい。

「分割プレビューで十分だろう」と思っていた時期の私に言ってやりたい――全然足りていなかった、と。

カスタムCSSでブログと一体化

カスタムCSS

ブログのテーマCSSを入れてみた

MarkTextにはカスタムCSSを適用する機能がある。このブログのテーマCSSを読み込ませると、ダークモード時に図の枠線が暗闇の中で光るように浮かび上がる演出まで再現される。執筆中の画面がブログの完成形に近づくことで、レイアウトや装飾の違和感に気づきやすくなり、公開前の確認コストが下がった。

完全ローカル完結とGit管理

MarkTextがNotionなどのクラウドツールと一線を画すのは、「完全ローカル完結」である点だ。データはすべて手元のプレーンテキスト(.md)として残るため、Gitによるバージョン管理の恩恵を100%享受できる。

Mermaid.jsのネイティブサポート

さらに、エンジニアにとって決定打となるのが Mermaid.js のネイティブサポートだ。コードブロックにテキストでシーケンス図やフローチャートを書くだけで、画面上で即座に図解される。VS Codeのプラグインを継ぎ接ぎすることなく、仕様書から図解までをクリーンなMarkdown1本で完結できるのが、このツールの真の強みである。

羊皮紙を巻く前に

Markdownというフォーマット自体はシンプルだが、「読む」「書く」という体験はツールによって驚くほど変わる。glow はターミナルという砂漠に灯をともし、MarkText は羊皮紙を紡ぐ作業から余分な摩擦を取り除いた。電脳砂漠を旅し続けると、いつの間にか不便を「当たり前」として受け入れていることがある。少し立ち止まって道具を見直すと、砂嵐が凪になる瞬間がある。

glowとMarkTextの優れた点

  1. glow ─ ターミナルを離れずMarkdownを快適に読める。VS Code起動のコストをゼロにする。
  2. glow ─ シンタックスハイライト対応で、コードブロックの視認性が高い。
  3. MarkText ─ WYSIWYGによる直感的な編集。Notionに慣れた感覚でそのまま使える。
  4. MarkText ─ カスタムCSSでブログと同じ見た目を再現し、執筆と確認を一体化できる。
  5. MarkText ─ 完全ローカル完結で、Gitによるバージョン管理に完全対応。
  6. MarkText ─ Mermaid.jsネイティブサポートで、図解もMarkdown1本で完結。

まとめ

cat README.md の見づらさも、VS Codeの分割プレビューも、長い間それが「普通」だと思っていた。しかし道具を一つ替えるだけで、同じ作業が別物になる。この羊皮紙が、あんたのMarkdown体験を一段滑らかにするきっかけになれば、それで十分だ。

砂漠で見つけた魔法のランプ

  • glow - GitHub | ターミナル向けMarkdownレンダラー。Charm社製オープンソース。
  • MarkText - GitHub | オープンソースのWYSIWYG Markdownエディタ。

ラクダの独り言

ご主人が「記号が邪魔だ」って言い出して、またひとつ道具を増やした。俺には全部同じ砂に見えるんだが、人間は見た目にうるさい生き物だな。道具を追加して、使い方を覚えて、ひとつ問題が解決したら次の問題が出てくる。砂漠は広いし、旅は終わらない。まあ、ご主人が楽しそうなら文句はない。やれやれだぜ。