JekyllのMarkdownのエンジンをRedcarpetからkramdownに切り替える

Redcarpetからkramdownに切り替える時にコードブロックの扱いに違いがありましたので調べてみました。

環境

  • OS X El Capitan バージョン 10.11.3
  • Jekyll バージョン 3.0.2
  • Redcarpet バージョン 3.3.3
  • kramdown バージョン 1.9.0

Redcarpet?

Redcarpet is a Ruby library for Markdown processing that smells like butterflies and popcorn.

GitHub - vmg/redcarpet: The safe Markdown parser, reloaded.

kramdown?

kramdown (sic, not Kramdown or KramDown, just kramdown) is a free MIT-licensed Ruby library for parsing and converting a superset of Markdown. It is completely written in Ruby, supports standard Markdown (with some minor modifications) and various extensions that have been made popular by the PHP Markdown Extra package and Maruku. It is probably the fastest pure-Ruby Markdown converter available (September 2014), being about 3x faster than Maruku and about 4.5x faster than BlueFeather.

Home | kramdown

きっかけ

先日、記事を投稿した後にGitHubから次のようなメールが届いていました。

The page build completed successfully, but returned the following warning:

You are currently using the ‘redcarpet’ Markdown engine, which will not be supported on GitHub Pages after May 1st. At that time, your site will use ‘kramdown’ for markdown rendering instead. To suppress this warning, remove the ‘markdown’ setting in your site's ‘{% raw %}_config.yml{% endraw %}’ file and confirm your site renders as expected. For more information, see https://help.github.com/articles/updating-your-markdown-processor-to-kramdown.

For information on troubleshooting Jekyll see:

https://help.github.com/articles/using-jekyll-with-pages#troubleshooting

If you have any questions you can contact us by replying to this email.

MarkdownのエンジンにRedcarpetを使っていたんですけど、2016/5/1からサポートしなくなるためkramdownを使うように、ということのようです。 現在のGitHub Pagesの標準のMarkdownのエンジンもkramdownのようですね。 kramdownは最初に使おうとしたんですけど、コードブロックが思うようにならなかったのでRedcarpetを使っていたんですけど・・

Redcarpetのコードブロック

:fenced_code_blocks: parse fenced code blocks, PHP-Markdown style. Blocks delimited with 3 or more ~ or backticks will be considered as code, without the need to be indented. An optional language name may be added at the end of the opening fence for the code block.

GitHub - vmg/redcarpet: The safe Markdown parser, reloaded.

3つ以上の~`で囲むとコードブロックになります。 ~~~ rubyのようにするとRubyの言語に合わせたシンタックスハイライトになります。 最初にMarkdownについて調べた時にGitHubのREADME.mdを書くところから入ったため、コードブロックは`で書くものだと思ってしまっていました。 Redcarpetでは~が標準的な扱いのようでした・・ いずれにしてもRedcarpetのコードブロックは`が使えたので問題はありませんでした。 後から知りましたが、GFM(GitHub Flavored Markdown)でも~が使えたんですね。

kramdownのコードブロック

kramdown also supports an alternative syntax for code blocks which does not use indented blocks but delimiting lines. The starting line needs to begin with three or more tilde characters (~) and the closing line needs to have at least the number of tildes the starting line has. Everything between is taken literally as with the other syntax but there is no need for indenting the text. For example:

~~~~~~~~
Here comes some code.
~~~~~~~~

Syntax | kramdown

こちらも~で囲むように記載されています。 最初は`しか知らなかったためkramdownが使えなかったんです・・

調べてみたらRedcarpet、kramdownのどちらも~を使えばいいということがわかったんですけど、GitHubに合わせて`を使えないかなと思ってもう少し調べてみました。

Liquidのシンタックスハイライト

Highlighting code snippets

Jekyll also has built-in support for syntax highlighting of code snippets using either Pygments or Rouge, and including a code snippet in any post is easy. Just use the dedicated Liquid tag as follows:

{% highlight ruby %}
def show
  @widget = Widget(params[:id])
  respond_to do |format|
    format.html # show.html.erb
    format.json { render json: @widget > }
  end
end
{% endhighlight %}

Writing posts

コードブロックじゃないんですけど、Liquidはシンタックスハイライトについて書いてあります。 これの存在はJekyllの記事を最初に投稿した時から気がついていたんですけど、今回調べてみてようやくどんなものかわかりました。 これはMarkdownではなく、Liquidというテンプレートエンジンなんですね。 Jekyllで記事を書く時に{% xxx %}とか{{ xxx }}とか書きますけど、このLiquidの機能でシンタックスハイライトするのが{% highlight %}だと理解しました。 Jekyllでサイトを生成する時にはMarkdownより先にLiquidが処理されているんじゃないかなと感じています。

Jekyllのホームページにある説明は{% highlight %}だけの説明になっています。 Jekyll自体がシンタックスハイライトをサポートしています、という打ち出し方をしているので、あえて他の方法を書くことをしていないんだと思いますが・・ Jekyllのホームページでそう記載されているのなら、それぞれの機能を理解した上で{% highlight %}を使うことでいいのかなと思いました。 無理して`を使う必要もないかなと思います。

インラインコード

最後にインラインコードについても調べたことを書いておきます。 インラインコードはRedcarpetもkramdownも`で囲みます。 この記事を書いている時にこのバッククォート自体をインラインコードの中で表示したかったので調べてみました。 これ`を表示するのに次のように書いています。

`` ` ``

表示するバッククォートよりも多い数のバッククォートで囲むようです。 表示するバッククォート自体が囲んでるバッククォートと並んでるとダメなので、囲んでるバッククォートとの間にスペースを入れています。

参考