MarsEdit - the blog editor for WordPress, Tumblr, Blogger and more. 
バージョン: 3.5.8
現在の価格: ￥3,450
サイズ: 7.9 MB
カテゴリ: ソーシャルネットワーキング, 仕事効率化
販売元: Red Sweater Software - Red Sweater Software
全てのバージョンの評価: ★4.0（5件の評価）
Markdown、してますか？
実は私はブログではあまり使っていません1。 しかし、Jekyll をきっかけに再び Markdown 熱が高まってきました。
Jekyll では複数の Markdown エンジンがサポートされています。 これらの Markdown エンジンではオリジナルの Markdown にない機能が実装されており、 表現力が増しています。
そして、MarsEdit がプレビューで使用する Text Filter としてこれらを使用することでブログの執筆が捗ると思って試したみたところなかなかよさそうです2。
目次
拡張 Markdown
各 Markdown エンジンとも PHP Markdown Extra を拡張の基本としているようです。
Jekyll がサポートしている Markdown エンジンは以下のものです。
PHP Markdown Extra の対応状況はそれぞれ異なりますので後述します。
今回は標準 Markdown にはない表現ができるようになる拡張に注目しました。
表組み
HTML で表を書くのはちょっと面倒ですよね。 シンプルな表であれば以下のように書くことができます3。
First Header | Second Header
------------ | -------------
Content Cell | Content Cell
Content Cell | Content Cell 上記のように書くと以下のような HTML に変換されます。
| First Header | Second Header |
|---|---|
| Content Cell | Content Cell |
| Content Cell | Content Cell |
セルのセンタリングや右寄せなどもできます。
|---
| Default aligned | Left aligned | Center aligned | Right aligned
|-|:-|:-:|-:
| First body part | Second cell | Third cell | fourth cell
| Second line |foo | **strong** | baz | Third line |quux | baz | bar
|---
| Second body
| 2 line
|===
| Footer row | Default aligned | Left aligned | Center aligned | Right aligned |
|---|---|---|---|
| First body part | Second cell | Third cell | fourth cell |
| Second line | foo | strong | baz |
| Third line | quux | baz | bar |
| Second body | |||
| 2 line | |||
| Footer row |
[目次へ]
脚注
脚注[^1]を記述することができる。
[^1]: 本文の下につける注釈 本エントリでもいくつか脚注を記載しています。
[目次へ]
定義リスト
HTML の dl, dt, dd になります。
Markdown
: 軽量マークアップ言語の一つである。 電子メールでプレインテキストを装飾する際の慣習から着想を得ている。
PHP Markdown Extra
: Markdown にいろいろな拡張を施したもの。 - Markdown
- 軽量マークアップ言語の一つである。 電子メールでプレインテキストを装飾する際の慣習から着想を得ている。
- PHP Markdown Extra
- Markdown にいろいろな拡張を施したもの。
[目次へ]
見出しの ID 属性の指定(目次の自動生成も)
見出しに ID 属性を指定することができます。
# 見出し1 {#heading1}
## 見出し2 {#heading2} のように ID を指定して、
[見出し1 へのリンク](#heading1) のようにリンクすることができます。
Maruku と Kramdown では以下のように記述することで目次を自動生成することができます4。
* 目次(この要素は HTML として出力されません)
{.toc} [目次へ]
コードブロック
標準 Markdown では 4 文字分インデントするとコードブロックになりますが、 拡張 Markdown では ~~~ で囲むとコードブロックになります。
また、言語の指定もできます。
↓エスケープの仕方がわからなかったので先頭にスペース文字をいれています。
~~~ Markdown
* 目次(この要素は HTML として出力されません)
{.toc}
~~~ コードブロックは Google Code Prettify や highlight.js で自動的にハイライトすることができるようです5。
追記: どのエンジンも MarsEdit で HTML に変換すると改行が削除されてしまうようです。
[目次へ]
各 Markdown エンジンの対応状況
| 拡張内容 | Maruku | RDiscount | Kramdown | Redcarpet |
|---|---|---|---|---|
| Inline HTML | * | * | * | * |
| Markdown Inside HTML Blocks | * | - | * | - |
| Header Id Attribute | * | - | * | - |
| Fenced Code Blocks | *6 | *7 | * | *8 |
| Tables | * | * | * | * |
| Definition Lists | * | - | * | - |
| Footnotes | *9 | - | * | - |
| Abbreviations | * | - | * | - |
| Emphasis | -10 | * | * | * |
| Backslash Escapes | * | - | * | * |
- *: 対応
- -: 非対応
- Redcarpet はオプションの指定が必要
本エントリで言及していないものについては PHP Markdown Extra をご確認ください。
上記を見ると、Kramdown がよさそうです。
Kramdown は HTML から Markdown への変換もできるようです。 まだ試していませんが、公開済みのエントリを Markdown に変換して編集し、再度 HTML に変換してサーバにアップロードするという使い方ができるかもしれませんね。
[目次へ]
MarsEdit の設定
Markdown エンジンのインストール
Markdown エンジンは gem コマンドでインストールすることができます。 環境によっては gem のアップデートを先に実行する必要があります。
$ sudo gem update --system
$ sudo gem install kramdown Text Filter の追加
$HOME/Library/Application Support/MarsEdit/TextFilters にフィルタ名のディレクトリを作成し、シェルスクリプトを作成します11。
Library/Application\ Support/MarsEdit/TextFilters/
├── Convert\ Line\ Breaks_1.1.3
│ └── Convert\ Line\ Breaks.py
├── Markdown_1.0
│ ├── License.text
│ ├── Markdown\ Readme.text
│ └── Markdown.pl
├── SmartyPants_1.5.1
│ ├── SmartyPants\ Readme.txt
│ └── SmartyPants.pl
├── Textile_1.0
│ ├── Text
│ │ └── Textile.pm
│ └── Textile.pl
├── kramdown
│ └── kramdown.sh
├── maruku
│ └── maruku.sh
├── rdiscount
│ └── rdiscount.sh
└── redcarpet
└── redcarpet.sh Redcarpet の例は以下の通りです。
#! /bin/sh
CMD=redcarpet
CMDARGS="--parse-no_intra_emphasis --parse-tables --parse-fenced_code_blocks --parse-autolink --parse-strikethrough --parse-superscript --render-with_toc_data"
$CMD $CMDARGS $1 MarsEdit でプレビューフィルタによる Markdown の使い方についは 以下をご覧ください。
[目次へ]
0 コメント:
コメントを投稿