namaraii.com

竹内 仁 (TAKEUCHI Hitoshi) の日記

Markdown/HTMLエクスポート機能を見直ししています(Porter for WorkFlowy)

Posted at — Feb 7, 2016

/images/jikiqeXHlC7GjK.png

はじめに

WorkFlowy の機能を拡張するChrome拡張のPorter for WorkFlowy のMarkdown/HTML出力の仕様を見直ししています。

現バージョン(1.1.2)のPorterではリスト・引用・テーブルを書こうとすると、ノートへ書くしかなく、お世辞にも使いやすいとは言えません。

特にリストに関しては、せっかくアウトライナーをつかっているのですから、トピックのインデントを活かして書きたいところ。

実装はほぼ完成しており、近日中に公開できる見込みですが、先行して新しい仕様を紹介します。

Porterが生成するHTML

まず、PorterのHTML変換について。

PorterdではWorkFlowyのデータを一旦Markdownへ変換してから、marked というライブラリでHTMLに変換しています。

MarkedはGFM(GitHub Flavored Markdown) と呼ばれる、拡張されたMarkdowをサポートしているので、Porter単体でGFMからHTMLへ変換できるという隠れ機能?があります。

これにより、

  1. WorkFlowyで文書を作成(書き上げるまではマークアップのことは気にしない)
  2. 意図したMarkdownになるよう多少の修正
  3. PorterでHTMLをエクスポート
  4. Wordpressの投稿画面へペーストして公開

というワークフローが可能になります。

実際、この記事自体もこのワークフローで書きました。WorkFlowyのアウトラインを下記で公開していますので、興味のある方はご覧ください。

Markdown(GFM)を意識した文書作成のポイント

では、WorkFlowy+Porterで「意図したMarkdownになるよう多少の修正」する上で知っておくべきポイントをまとめます。

段落

子トピックがいないトピックは段落として扱われます。

/images/8W2tfR7ArFquTf.png

リスト(新仕様)

先頭が「*」または「+」または「-」で始まり、1つ以上のスペースがあるトピックは、リストとして出力されます。

トピックのレベル(インデント)でリストをネストすることができます。

/images/BgbUIHoOa8uKaj.png と書くと以下のようになります。

番号付きリスト(新仕様)

先頭が数字で始まり、数字が続いた後にスペースがあるトピックは、リストとして出力されます。

/images/A3qgK214quHBRU.png と書くと以下のようになります。

  1. 横浜市
  2. 横浜FC
  3. YSCC
  4. 横浜Fマリノス

引用(新仕様)

先頭が「>」で始まるトピックは引用になります。

/images/j55D7LFT3T3L5d.png というトピックは、以下のようになります。

You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future.
Steve Jobs

テーブル(新仕様)

GFM構文でテーブルを記述できます。

/images/VzAKNLPaPRQ16N.png と書くと以下のようになります。

header1header2header3align leftalign rightalign centerabc

行数が多い場合はノートに記述したほうがよいかもしれません。

以上、WorkFlowy+PorterでMarkdown/HTMLの文書を作成するときのポイントでした。

よく使う(であろう)Markdown記法

以下によく使うと思われる記法をまとめておきます。

リンク

リンクしたいテキストを半角 [] で囲み、それに続く半角 () にリンク先URLを書くとリンクになります。

/images/2snwe1odEL-jYo.png と書くと以下のようになります。

ウェブ関連技術の標準化は World Wide Web Consortium (W3C) などによって行われています。

URLを記述するだけで自動的にリンクになります。http://namaraii.com/

画像

リンクと似ていますが、先頭を!で開始して、

/images/onxYtN6vWxmAD5.png のように書くと画像の参照になります。

強調

*強調したい文字*を「*」で囲むと、強調になります。

さらに強い強調をしたい場合「**」で囲みます。

水平線

トピックの先頭から「*」か「-」を3つ以上書くと水平線になります。


取り消し線

「~」2個で囲んだ文字は取り消し線が設定されます。

コードの引用

先頭にチルダ3つ書き、後ろに対象シンタックスの言語名を記述します。

コードをはさみ最後をチルダ3つで閉じます。

/images/qSP-MoRwzZwrJi.png と書くと、以下のようなHTMLが生成されます。

/images/Ei0MamffG70kmF.png トピックにも書けますが、コードはノートに書いたほうが良いと思います。

廃止予定の機能

リスト出力の強化に伴い、出力モード(Headings/Bulleted/Numbers)は廃止する予定です。これに伴いエクスポートの際は、

を指定するだけになり、よりシンプルでわかりやすくなると考えています。