WorkFlowyにMarkdown風プレビューを付けてみた MarkFlowy
趣味に走って師走。
考え直してみた
下書きからクライマックス。WorkFlowyのブログを見ていたら、Chromeの拡張機能でMarkdownプレビューする方法が載っていました。でもこれ、全文コピーしてプレビュー・アプリに貼り付けるよう...
前回のブックマークレットから斜め上に進化しました。そもそもWorkFlowyに書くときMarkdownで直接書くことはない。前提を間違えました。ブログの下書きだから、WorkFlowyが変換されてMarkdownになるのが筋というもの。
ルールは簡単
ブログは見出し／本文／リストで構成される。それをWorkFlowyで構造化します。そしてブックマークレットを使うと、下記ルールでMarkdownに変換する仕組み。
- 親トピックはタイトルとして扱う(H2)
- １段目のトピックは段落の見出し(H3)
- ２段目のトピックを本文とする
- ３段目以降はリストとして表現する
- ノートは引用文と見なす
MarkFlowy(view)
こんなプレビューになります。意外と思った感じに仕上がっている。Markdownが文章構造を扱う言語なのは、こういうところに現れます。アウトライナーと親和性が高いですね。構造はメッセージである。ブックマークレットは下記スクリプトになります。
javascript:MarkdownStyle="body{font-family:Hiragino Mincho ProN;word-wrap:break-word;}h1,h2,h3,h4,h5,h6{font-family:Hiragino Sans;padding:10px 0 0;} blockquote{font-family:Hiragino Sans;font-size:small;margin:0px;border-left:20px #fff groove;} table{border-left:1px gray solid;border-top:1px gray solid;border-spacing:0;} th{background:ivory;border-right:1px gray solid;border-bottom:1px gray solid;} td{border-right:1px gray solid;border-bottom:1px gray solid;} pre{background:#efe;padding:10px} u{border-bottom: 2px #00f solid;} strong{border-bottom:2px #f00 solid;} em{background-color:#bf9;} img{max-width:450px;}";p=pageContainer.innerHTML;p=p.replace(/<\/div>/g,"").replace(/<span .+?>/g,"").replace(/<\/span>/g,"\n");p=p.replace(/<div class=\"(.+?)\">/g,"\t$1\n").replace(/<div>/g,"").replace(/\n+/g,"\n");p=p.replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&");s="";b=n=0;line=p.split("\n");for(i=0;i<line.length;i++){c=line[i];switch(true){case /^\t(.+?)selected/.test(c):s="";b=1;n=0;break;case /^\tnotes/.test(c):n=1;break;case /^\tchildrenEnd/.test(c):b--;break;case /^\tchildren/.test(c):b++;n=0;break;case /^\t/.test(c):break;case b<1:break;default: if(n){s+="> ";}else{switch(b){case 1:s+="## ";break;case 2:s+="\n### ";break;case 3:s+="\n";break;default:for(j=4;j<b;j++)s+=" ";s+="* ";}}c=c.replace(/<a class=\"contentLink\"(.+?)>(.+?)<\/a>/g,"$2");s+=c+"\n";}}s=s.replace(/\n([#\*])(.+?)\n([^\s\*])/g,"\n$1$2\n\n$3");e=document.createElement("script");e.src="https://raw.github.com/chjj/marked/master/lib/marked.js";e.onload=function(){marked.setOptions({breaks:true, gfm:true, langPrefix:""});s=marked(s);location="data:text/html;charset=UTF-8,<meta name=viewport content=initial-scale=1><style>"+MarkdownStyle+"</style>"+s;};document.body.appendChild(e);
MarkFlowy(edit)
Textwellへの書き出しは下記ブックマークレットになります。変数editorを書き換えれば、他のアプリへの出力も可能です。これをもとに推敲して投稿。
javascript:editor="textwell://replace?text=";p=pageContainer.innerHTML;p=p.replace(/<\/div>/g,"").replace(/<span .+?>/g,"").replace(/<\/span>/g,"\n");p=p.replace(/<div class=\"(.+?)\">/g,"\t$1\n").replace(/<div>/g,"").replace(/\n+/g,"\n");p=p.replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&");s="";b=n=0;line=p.split("\n");for(i=0;i<line.length;i++){c=line[i];switch(true){case /^\t(.+?)selected/.test(c):s="";b=1;n=0;break;case /^\tnotes/.test(c):n=1;break;case /^\tchildrenEnd/.test(c):b--;break;case /^\tchildren/.test(c):b++;n=0;break;case /^\t/.test(c):break;case b<1:break;default: if(n){s+="> ";}else{switch(b){case 1:s+="## ";break;case 2:s+="\n### ";break;case 3:break;default:for(j=4;j<b;j++)s+=" ";s+="* ";}}c=c.replace(/<a class=\"contentLink\"(.+?)>(.+?)<\/a>/g,"$2");s+=c+"\n";if(n) s+="\n";}}s=s.replace(/\n([#\*])(.+?)\n([^\s\*])/g,"\n$1$2\n\n$3");location=editor+encodeURIComponent(s);
