nDiki : GitHub Flavored Markdown

Emacs markdown-mode 設定していなかったので設定した

Markdown ファイルに色がつくだけでもまず良い。

• http://jblevins.org/projects/markdown-mode/

公式サイトから markdown-mode.el をダウンロードし、設定ファイルに

 (autoload 'markdown-mode "markdown-mode"
     "Major mode for editing Markdown files" t)

 (add-to-list 'auto-mode-alist '("\\.markdown\\'" . markdown-mode))
 (add-to-list 'auto-mode-alist '("\\.md\\'" . markdown-mode))

としておけばまずは OK。standard Markdown (SM) ではなく GitHub Flavored Markdown (GFM)*1 で書いているならば markdown-mode のかわりに gfm-mode を使う。

外部コマンドを呼んで HTML ファイルに変換して preview とかする機能もあるのだけれど特に使うことなさそうなのでスルー。

Text::Markdown::Discount でテーブルや ``` や自動リンクなどの拡張を使う

最近ノートやちょっとしたドキュメントは Markdown で書いて、Plack::App::Directory::Markdown (記事) (に手を入れて grep 検索や recent リストを表示できるようにした) Markdown ビューアで参照したり、関係者に見せたりしている。

重宝しているんだけれど、内部で使っている Text::Markdown Perl モジュールは、テーブルや GitHub Flavored Markdown にある fenced code blocks (``` で挟むやつ) が使えないのでちょっと不便になってきた。

Text::Markdown::Discount Perl モジュールはこの辺の拡張が使えるので、こちらに切り替えることにした。

• Text::Markdown::Discount

このモジュールは discount というC言語書かれた Marrkdown 処理コードを使うもので、Text-Markdown-Discount 内に同梱されている。

• http://www.pell.portland.or.us/~orc/Code/markdown/

そのままインストールすると fenced code blocks が有効になっていないので以下のようにしてインストールする。

 $ tar zxvf Text-Markdown-Discount-0.11.tar.gz
 $ cd Text-Markdown-Discount-0.11

 ここで Makefile.PL 中の

   qq{( cd $extdir; CC='cc -fPIC' sh configure.sh; make )\n}

 を

   qq{( cd $extdir; CC='cc -fPIC' sh configure.sh --with-fenced-code; make )\n}

 に変更する。

 $ cpanm .

で Text::Markdown::markdown() のかわりに Text::Markdown::Discount::markdown() を使うようにすれば OK。

なお自動リンクをしたい時には

 my $html = Text::Markdown::Discount::markdown($markdown_text,
   Text::Markdown::Discount::MKD_AUTOLINK);

のようにオプションを指定してあげる。

GitHub Flavored Markdown ファイルの Web ブラウザでのプレビューに Grip を使う

「Markdown で書いているノートを Web ブラウザで見るのに MkDocs を使う」とつぶやいたら @bsdhack 氏が Grip を紹介してくれました。

私はgithubなどのmdファイル(https://t.co/nyoqRnjsN7)を読むために python製の grip 使って↓なスクリプトを書いて使ってます。

grip --export ${1:-README.md} - | w3m -T text/html

— Mitzyuki IMAIZUMI (@bsdhack) 2018年2月28日

さっそく試してみました。

 $pip2 install grip

でインストールしたら Markdown ファイルを指定して Grip を起動します。

 grip index.md

Grip が http://localhost:6419/ で Web サーバとして立ち上がるので Web ブラウザでアクセスすると index.md の HTML 変換されたものを見ることができます。なお

 grip -b index.md

とすれば起動と同時に Web ブラウザで開いてくれます。URL でパスを指定すればそのまま同じ/サブディレクトリにある Markdown ファイルもプレビューできるので、ハイパーリンク付けをしておくことでドキュメント群をブラウジングすることもできます。なるほどお手軽で便利。 GitHub 上とほぼ同様の見慣れたデザインになるのがいいですね。

そもそも Grip は「GitHub Readme Instant Preview」で GitHub 上での表示確認のためのツールで、 GitHub の REST API を使ってレンダリング結果を生成しているので当然といえば当然だったりはします。

ただそのかわり GitHub の API を使うので

• オフラインでは使えない(オフラインレンダリングは開発中)
• 外部サービスを使って変換させたくないドキュメントには使えない

と場合によっては不便な部分があります。なお後者については GitHub Enterprise があるなら Grip でそちらを指定するとう手もあります。

GitHub に push する前にチェックしたい時はもちろん、それ以外でさっと Web ブラウザで見てみたい時にも便利なツールですね。

• https://github.com/joeyespo/grip

今日のさえずり: イトーヨーカドー 大井町店のポッポとうとう今日まで。名残惜しい。

• 08:03 Google Chrome 68 の HTTP サイトでの表示は「保護されていません」になるのかな。ニュースサイトが書いていた「非安全」ほどはキツくない表現。 / “保護されたウェブの普及を目指して” http://bit.ly/2FBonP5
• 13:00 イトーヨーカドー 大井町店のポッポとうとう今日まで。名残惜しい。
• 15:15 Mac 上にある Markdown で書いたノートファイルを Web ブラウザで見るのに MkDocs を使ってみた。ビルトイン Web サーバ付き。 http://bit.ly/2F0lWV4
• 17:21 とんかつ屋さん #α6300 + GIZMON #Utulens http://bit.ly/2ht8a6M https://t.co/mNUuKKt3ep
• 22:27 @bsdhack ありがとうございます。 Grip 初めて知ったので使ってみました!
• 22:28 GitHub Flavored Markdown ファイルの Web ブラウザでのプレビューに Grip を使ってみた。 http://bit.ly/2t4U2Wk
• 22:31 @bsdhack Grip で変換するの単独ページだけかと思ったらちゃんとディレクトリ階層中の Markdown ファイルも表示できて「おー」となりました。
• 22:36 お疲れ様でした & お大事に! @orga_chem / “退職の前座エントリ - 若き JavaScripter の悩み” http://bit.ly/2CP3vR9

とんかつ屋さん#α6300 + GIZMON #Utulenshttps://t.co/KUHQRJ3qgg pic.twitter.com/mNUuKKt3ep

— Naney (@Naney) February 28, 2018

表やダイアグラムの編集・表示に便利な Markdown エディタ Typora

表やダイアグラムを含むノートを編集・表示するのに Markdown エディタ Typora がかなり良さそう。

Markdown 形式をメインとしてテキストファイルベースでノートを書いていて不便だと思っているのが作表。Markdown ソースファイルで表を編集していて列の追加・削除・入れ替えが必要になった時にはエディタの支援が無いと絶望する。Markdown Mode for Emacs で表編集の機能がいろいろあることを知ってちょっといいかもと思ったけれども、やはり表としてレンダリングされた状態で編集したいなと。

そう思って探してみたら編集画面とプレビュー画面が別れていない Markdown エディタ Typora が表編集もサポートしていると知って試してみた。

• https://typora.io/

使ってみたところ Google ドキュメントで表を編集しているようなのと同様な感じで直感的に表編集できた。欲しかったのこんな感じ!

また表だけでなく

• js-sequence
• flowchart.js
• mermaid

を使ってテキストで簡単な図を書けるというのも嬉しい。 Markdown ファイル中にテキストして書いておけるので、図の画像やそのソースファイルの管理に悩まされないで済むのだ。ノートにちょっとしたロジックツリーを書いておきたいことがあるので良い!

https://typora.io/

Markdown 文法は GitHub Flavored Markdown ということだしこれは自分にとって主力 Markdown エディタになるのではという予感がする。

※画像は Typora の PressKit https://typora.io/presskit.zip より。

[ ノート・日記はテキストファイルに ] [ Mac アプリケーション ]