/ #workflowy 

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

#### はじめに

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になるよう多少の修正」する上で知っておくべきポイントをまとめます。

段落

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

#### リスト(新仕様)

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

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

と書くと以下のようになります。

  • リスト1
  • リスト1–1
  • リスト1–2
  • リスト1–2–1
  • リスト1–3
  • リスト2

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

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

と書くと以下のようになります。

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

引用(新仕様)

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

というトピックは、以下のようになります。

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構文でテーブルを記述できます。

と書くと以下のようになります。

header1header2header3align leftalign rightalign centerabc

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

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

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

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

リンク

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

と書くと以下のようになります。

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

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

画像

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

のように書くと画像の参照になります。

強調

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

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

水平線

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


取り消し線

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

コードの引用

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

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

と書くと、以下のようなHTMLが生成されます。

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

廃止予定の機能

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

  • Markdown/HTMLのどちらで出力するか
  • ノートの出力要否

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

Edit(Admin)