Tag Archives: Markdown

[Komodo Edit] Komodo Markdown Aidをリリースしました

Komodo Markdown Aid

Screenshot

Komodo IDE/EditでMarkdownを書きながらプレビューするための支援ツールを作りました。
ファイルの保存をトリガに実行されるpythonマクロです。

GitHub: https://github.com/ivoryworks/komodo-markdown-aid

インストール

zipをダウンロードするか、git cloneしてプロジェクトを保存します。
次に、Komodo IDE/EditのToolboxメニューからインポートします。

つかいかた

拡張子が.mdのファイルに対して有効です。
保存をトリガにプレビューが開きます。

これで使えるのですが、Markdownの変換処理を高速化するために、後述するStrapdown.jsのダウンロードを行ってください。
Strapdown.jsは同梱する事にしました。これにより、ダウンロードしてそのまま使えます。

Markdownのコンバート(Strapdown.js)

Markdownのコンバートには、Strapdown.jsを用いています。
これはJavaScriptによる実装で、プレビュー画面表示時にMarkdownからHTMLへと変換しています。

初期設定では、Strapdown.jsがホストしているURLが設定されており、そのままですと、コンバート時にネットワーク接続が必要であったり、また変換処理がもたつくため、Strapdown.jsをPCにダウンロードして用いることを強くお勧めします
ダウンロードの際には、Strapdown.jsだけでなく、他の関連ファイルも合わせてダウンロードするようにしてください。

テーマについて

README.mdにはまだ書いていないのですが、Strapdown.jsは任意のBootstrapテーマを適用することが可能です。
カスタマイズ方法については後日解説します。

Markdown リスト直後のリスト、または段落について

リスト直後のリストが書きにくい

 Markdownにおいて、個別のリストを連続して並べるのは少々厄介。
 これから説明するけど解決法だけ求めてる人は一気に下までスクロールゴー。

リスト直後のリスト

 次のように書くと、

Markdown:
1. Item1
2. Item2

1. Item-A
2. Item-B

 こうなる。

Formatted:
  1. Item1
  2. Item2

  3. Item-A

  4. Item-B

リスト直後の段落

 リスト直後に段落(パラグラフ)を置いた場合も、期待しない結果になることがある。

Markdown:
1. Item1
2. Item2

 上記のリストでは・・・

こうなる。

Formatted:
  1. Item1
  2. Item2

    上記のリストでは・・・

 少しわかりにくいかもしれなけど、『上記の~』の段落が、Item2の子としてフォーマッティングされている(ちなみに、『上記の~』段落は全角スペースで字下げしている)。

 なぜか。

Markdown リスト構文の性質

リストアイテムを空行で分断する

If list items are separated by blank lines, Markdown will wrap the items in <p> tags in the HTML output.

Daring Fireball: Markdown Syntax Documentation

 「もしリストアイテムが空行で分断された場合は<p>タグでラップする」とある。
 最初の例(並んだリスト)では、”Item2″と”Item-A”との間に(リストを分断したつもりの)空行が存在する為、”Item2″と”Item-A”は<p>タグで括られ、続くリストはリストアイテム3、4としてフォーマッティングされる。”Item-A”と”Item-B”の間に空間が開くのは、”Item-A”が<p>タグで括られているため。

HTML:

  1. Item1
  2. Item2

  3. Item-A

  4. Item-B


リスト中の段落

List items may consist of multiple paragraphs. Each subsequent paragraph in a list item must be indented by either 4 spaces or one tab:

Daring Fireball: Markdown Syntax Documentation

 「リスト項目は複数の段落で構成することができ、リスト項目の後続の各段落は4スペースまたはタブのいずれかでインデントしなければならない」とある。結局はこれも、リストアイテムを分断している。

 こういう事。

Markdown:
1. Item1
2. Item2

    リスト中の段落
3. Item3
Formatted:
  1. Item1
  2. Item2

    リスト中の段落

  3. Item3

HTML:

  1. Item1
  2. Item2
    リスト中の段落

  3. Item3

 段落については、字下げをしなければ「4スペースまたはタブのいずれかでインデントしなければならない」に合致しない(どうやら全角スペースはインデントとみなされているようだ)ため、リストは分断される。
 けれど個人的には日本語の文章を書く場合、段落の先頭、段落中の改行後の先頭については、字下げしないと気分が悪い。

 どうする?

解法:Wikipediaに書いてあった

 WikipediaのMarkdownには、簡易的な構文サンプルが書いてあるけど、実はそこに実例が書いてあった。

    * 順序無しリストのアイテム
       * サブアイテムは4つのスペースでインデントする
    * 順序無しリストの別のアイテム
    
    <!-- dummy comment line for breaking list -->
    
    1. 順序付きリストのアイテム
    2. 順序付きリストの別のアイテム

 要するに、分断したい個所(リストの終了)にHTMLのコメント記述をすることでリストを分断(終了)している。

 これでOK。

Markdownエディタ『StackEdit』

Screenshot_from_2013-06-12 01-42-26

 Webブラウザ上で動作するStackEditというMarkdownエディタを使っています。このアプリは、Chromeウェブストアに並んでたり、Google Driveのアプリに追加できたりするので、Chrome専用とかGoogle Drive専用と思われがちですが、アプリ本体はGitHubでホストされていて、Chrome以外のブラウザでも動作します。

リアルタイムプレビュー

 外観は左右2paneのオーソドックスなものです。右側がプレビューで位置の変更はできません。
 プレビューはリアルタイムに反映されます。それと、一方のスクロールにもう一方も追従するようになっていて使い勝手は良いです。

読み書き

 Google Drive、Dropbox上のファイル編集に対応しています。また、拡張子.mdとなるMarkdown記法のままか、HTMLへフォーマッティングした形式で、ローカルにエクスポートする事ができます。

同期

 少し変わった機能に、Google DriveとDropboxの同期機能があります。
 これはファイル単位で機能するもので、StackEditがその仲介役を果たします。

 例えば、Google Drive上のAというファイルと、DropBox上のBというファイル(中身はAと同じ)を、紐づけておくことで、一方に更新があった場合、他方にその内容が同期されます。また、StackEditで編集した場合も、双方にその内容が書き込まれます。

 これはあくまで、StackEditが同期の仲介するものなので、StackEditを起動して該当のファイルをオープンするまで同期処理は実行されません。ただ、この動作原理を理解しておくと、便利に利用できるはずです。

公開

 現時点で、以下への公開機能を持っています(SSH Server!?)が、まだ試してません。

  • Blogger
  • Dropbox
  • Gist
  • GitHub
  • Google Drive
  • SSH Server
  • Tumblr
  • WordPress

 今のところ特に不満なく使ってます。ブラウザベースで動作するのでクロスプラットフォームなのもいいです。もちろんNexus7でも動作してます。
 「同期」と「公開」に挙げた特徴を有効的に使っていこうと思います。便利に使えるかもしれません。ちょっといろいろ試してみます。

Markdownを試しています

isMarkdown

 巷で超絶イケてる軽量マークアップ言語であるMarkdownを先日から試してます。
 普段から、Markdown記法を導入できるところは積極的にMarkdownで書くようにして手に馴染ませていこうかと。

Markdownは、文書を記述するための軽量マークアップ言語のひとつである。「書きやす
くて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML(もしくはHTML)
文書へと変換できるフォーマット」として、ジョン・グル―バー(John Gruber)により
作成された。アーロン・スワーツ(Aaron Swartz)も大きな貢献をしている。
Markdownの記法の多くは、電子メールにおいてプレーンテキストを装飾する際の慣習
から着想を得ている。
Markdown – Wikipedia

 以前、Markdown便利そうだから習得したいなあと思いながらも、あまり熱心に使おうとしなかったせいか、結局身に付かず仕舞いでした。
 で、つい先日、普段から書いているアイデアメモ等の書き方、残し方、管理の仕方を考えている内に、再びMarkdownの事を思い出して、ちょっと姿勢を正して真面目に取り組んでみようかなと思い立ったワケデス。

なにがいいの?

 いかにMarkdownが素晴らしいかを熱く語っているコンテンツ(しかも日本語で)は探せば無限に出てくるので、改めて多くを書きませんが、少しだけ使ってみて、これはいいなと思った事を書いてみます。
 原典としては、Markdown記法を定義したJohn Gruberさんのサイトを読んでみて頂戴。

  • テキスト単体でも機能する

 Markdown記法は、電子メールの本文で使われる装飾表現から着想を得たそうです。
 このため、独自のタグや一見意味不明に記号を並べるような記法、つまりフォーマッティングしないと読みにくいものではなく、プレーンテキストとしての見た目が自然で、テキスト単体でも(フォーマッティングせずとも)読みやすく、文章として十分機能します。

  • 安定する

 Markdown記法はシンプルなので、慣れれば常にプレビューしなくても、ある程度の品質を保って文章を書き進める事ができます。
 また、Markdown記法を用いることで、文章構成が安定してきます。これは読み手にも書き手にも良い事です。

  • 筆を選ばず

 プレーンテキストなので特別なエディタを必要としません。テキストファイルが扱える全てのエディタでMarkdown記法による文章が書けます。そして読めます。どちらかと言えば、読めることが素晴らしく重要です。

  • HTMLとの親和性が高い

 Markdown記法では、その文章中のHTMLタグは、いたって普通に解釈されます。このため、Markdown記法とHTMLをシームレスに行き来できます。「ここからHTMLが始まります」という特別な宣言はいりません。


このエントリもMarkdown

 WordpressでMarkdown記法を使えるようにするプラグイン、Markdown on Save Improvedを導入する事にしました。
 このエントリもMarkdownで書いています。
 記事毎にMarkdownを適用する/しないが設定できるので便利です。

 しばらくは、Markdownを使用する機会を増やすようにしていこうと思います。