rcmdnk's blog
Last update

20131012_footnote_200_200

OctopressにKramdownを導入して1 PHP Markdown Extraの footnote書式が使える様になったので、 ついでにそれを使ったプラグインを作りました。

footnote-extra

インストールは基本的にplugins/footnote_extra.rbを 自分のpluginsに入れるだけです。

やりたかったのはLatexの様に

  • 番号を気にせずに書いていって自動的に番号を振らせること。
  • Latexのfootnoteの様に、footnoteを埋め込む場所に noteを書き込んで理解させること。

書き込んだタグをPHP Markdown Extraのfootnote書式に変更します。 ([^1][^1]-等。)

元々 footnote-octopress を使っていたので、これと競合しないよう、 以前のポストはそのままで置いておける様にしてあります。

ただし、1つの記事の中ではfootnote-octopressかfootnote-extra のどちらかしか使えません。

最終的なhtmlは似たような形になるので、基本的に footnote-octopressのcssを使えます。

footnote-extraの中にもscssが入ってますが、現在自分で使ってる 物を入れてあります。

また、footnote-octopressの方から footnote.js というfootnoteをポップアップするためのJavaScriptも拝借しています。 全く同じものなので、footnote-octopressですでに インストールしてある場合は新たにインストールする必要はありません。 ちなみにこのJavaScriptは出力後のfootnoteのhtmlに適用されるわけなので、 通常のPHP Markdown Extraのsyntaxでfootnoteを書いても 適用されます。

使い方は{% fnex %}または{% footnote_extra %}と言うブロックを使って footnoteを書き、

ポストの最後にfootnoteを出力させるために

{% footnotes_extra %}

または

{% footnotes_list_extra %}

を加えてください。

 footnoteをここへ{% fnex %}footnote{% endfnex %}埋め込む。

のようにすると。


footnoteをここへ2埋め込む。


こんな感じに。 さらに、コードもインデントやインラインブロックを使えば書けて (codeblockはブロックの中のブロックになってしまうので駄目。)

コードを含むfootntoe
{% fnex %}
footnoteにコードを書く

    this is a code line.

通常の文字。

`インラインコード`
{% endfnex %}。

とすると、


コードを含むfootntoe 3


こんな感じに出来ます。

ポストの最後に

{% footnotes_extra %}

を忘れないように。

まとめ

今まで特に後からfootnoteを足す際にreference番号を変えたりするのが面倒で、 さらに下にまとめて書くとどれとどれが対応してるかわかりづらかったりしたんですが、 これで大分分かりやすくなりました。

この書き方自体はPHP Markdown Extra無くても footnote-octopressを変更すれば出来るわけですが。

追記: 2013/10/13

と思ったので、footnote_inline.rbというプラグインも追加しました。

同じレポジトリ内(footnote-extra) にあります。

使い方は殆一緒で、fnex/footnote_extrafnin/footnote_inlineへ、 footnotes_extra/footnotes_list_extraの代わりに footnotes_inline/footnotes_list_inlineを使います。

Kramdownの場合はそのまま使えますが、 RDiscount等の場合はfootnote_inline.rb の15行目辺りのto_htmlを使ってる所のコメントを 変えてRDiscountを使う様にします。

他のパーサーは試してないですが、同じ様にto_htmlが使えるなら 使えると思います。

追記ここまで

KramdwonにしなくてもRDiscountもv2.0.7(最近のOctopressのデフォルト)では PHP Markdown Extraの書式が使えるのでこのプラグインが使えますが、 改行が余り上手く行かない様なので4 もしRDiscountと使う場合はその辺を注意してください。 (ちょっと今のバージョンで試してみたところ大丈夫そうでしたが。)

追記: 2013/12/20

Markdown Extraの方法だとテーブル内にfootnoteを打つと上手く出来ないので、 すべてfootnote_inlineへ移行しました。 またfootnote_inlineは別の専用レポジトリへ移動しました。

footnote-inline: Octopress用footnoteのプラグイン

追記ここまで

Sponsored Links
  1. MarkdownのパーサーをKramdownへ変更

  2. footnote

  3. footnoteにコードを書く

    this is a code line.
    

    通常の文字。

    インラインコード

  4. From Tumblr to Octopress, Part 3: Footnotes

Sponsored Links

« MarkdownのパーサーをKramdownへ変更 git submoduleについてのメモ 追加/削除/更新等 »

}