WebサイトをMarkdown化するブックマークレットの意外な活用法

Javascriptってすごいなあ。

Markdown.css - make HTML look like plain-text
CSS to make HTML markup look like plain-text markdown.The example below shows HTML that looks like m...

HTMLファイルをMarkdown風に表示するスタイルシート。これだけだと使い道がないんですが、活用するためにブックマークレットを組み込むと、急に面白くなります。

文中にある「markdownify」がそれ。iPadでは抜き出せないので抜粋しておくと、下記のようになってます。これをSafariのブックマークレットとして登録しておきます。

javascript:(function(){function callback(){(function($){var jQuery=$;$('link[rel=stylesheet]').add('style').remove();$('[style]').attr('style', '');$('head').append('<link rel="stylesheet" href="http://mrcoles.com/media/test/markdown-css/markdown.css" type="text/css" />');$('body').addClass('markdown').css({width: '600px', margin: '2em auto', 'word-wrap': 'break-word'});$('a img').css({'max-height': '1em', 'max-width': '1em'})})(jQuery.noConflict(true))}var s=document.createElement("script");s.src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js";if(s.addEventListener){s.addEventListener("load",callback,false)}else if(s.readyState){s.onreadystatechange=callback}document.body.appendChild(s);})()

このブックマークレットを実行すると、HTMLソースがMarkdown記法で表示される。何が良いかというと、実はリンクが見えるのです。そして、ブックマークレット自体も読める。つまり、他のサイトのブックマークレットを拾いたいとき、これだとスクリプト名を確かめながら、そのスクリプト自体もコピーできるようになるわけです。
ボタンになっているブックマークレットをSafariで抜き出す JavascriptPicker

DraftPadでMarkdown記法をHTMLに変換するアシスト
申し訳ない。パクります。MyScriptsの作者Unit Kayさんの新作はテキスト・エディタでした。タグでテキストを管理したり、スワイプでカーソル移動したりといった一段上のエディタ。しかも、MySc...

DraftPadでは公式アシスト・ライブラリにMarkdown Previewがあり、また拙作の変換アシストもあります。ただ、Markdownは表現力が乏しい。でも、その乏しさをソースファイルの解析に転用すれば便利に変わります。markdownify、これは慧眼。