Webページをmarkdown化するMarkDownloadを使って手軽にリンク一覧markdownをこさえてみた

はじめに

HTML文章をmarkdownとしてダウンロードできれば加工の手間がへりそうだなと思っていましたが、恐らく無茶なことだとして諦めていました。ところが試しに検索してみると turndown というライブラリがあることに気が付きました。

HTMLを切り出して引用にしたり、Aタグの羅列を手軽くlink化加工するには良さそうだなと思いつつ、できればブラウザから数クリックで出来ないものかと検索してみたところ、MarkDownload がありました。

何ができるのか色々と試してみて、意外と実用的だと感じた使い方を見つけたため、導入交えて書いてみました。

Chrome Web Storeからのインストール

以下からインストールします。実はforkされたリポジトリから作られた拡張なのですが、オリジナル側の拡張はmarkdownがpopupで表示されなくなっており、使い勝手の点でこちらにしました。

インストール後、使いやすくするためにツールバー上の表示を有効にしておきましょう。

ウェブサイトをMarkdown化してみる

ツールバーからボタンひとつでMarkdown化ができます。気をつけるべき点として、画面上に見えている通りの順番でテキスト化されるわけではないということです。変換にCSSが考慮されないのは当然なのですが、テーブルタグを用いたレイアウトが入っているページはお察しな状態になります。

とりあえず試す場合は、実行する意味があるのかどうかは置いておきつつもGitHubリポジトリのREADMEファイルがおすすめです。

OneTabと組み合わせてリンク一覧のmarkdown化

色々試してみた結果、感触が良かった使い方です。

参考にしたリンク一覧をまとめてMarkdown化したい場合に、一番のネックはそのリンク一覧を作ることです。望んだリンク一覧と同じものを作っている人がいるとは限りません。

手っ取り早いのは、一覧に加えたいリンクを全てタブで開き、OneTabでリンクページを作った上で、MarkDownloadで一括markdown化する方法です。ただ、少し調整が必要です。

1. 対象のURLを全て開いてタブ化します。
2. OneTabを使って1つのタブに収めます。
3. 「ウェブページとしてシェアする」を選択します。
   
4. デベロッパーツールを開いて、ページ上部の「Scan this QR code using..」の部分を選択します。
   ※QRコードそのものではありません。
   
5. 該当のElementを削除します。
   
6. MarkDownloadを実行して、リンクのmarkdown化が出来ることを確認します。
   

faviconリンク部分で少し加工の必要はありますが、vimで以下の正規表現置換を行えば直ぐにおわります。

:%s/^!\[\]([^)]\+)/-/g

あとがき

HTMLのmarkdown化ではかどりそうなことを探してみましたが、ブラウザ拡張経由では余り複雑なことはし難いというのが正直なところです。turndown自体もタグによっては変換が中断してしまうため、適度な要素の調整が求められます。

ある程度用途を限定することで快適にmarkdown加工が行えるため、毎回リンクをコピペするのが面倒だったりする場合は試してみる価値有りだと思いました。

参考リンク

• MarkDownload - Markdown Web Clipper
• deathau/markdown-clipper
• domchristie/turndown
• OneTab