Octopressでのコードの表示やコメントのあれこれ

Octopressを使ったブログでコードを書きたい時は簡単にcodeblock等を使って書けるのですが、 Octopressのちょっとしたコードを載せたいときに、 {% ~ %} で囲う部分が変換されてしまったり { をコード内で書くと文法が違うと怒られてしまったりすることがあるので、どうしたものかと悩んでいましたが、ちゃんと用意されたものがあったのと、さらに加えていくつか関連して学んだ事もあるのでまとめておきたいと思います。

Octopressでのコードの書き方
Octopressのスニペットが上手く表示できない
rawブロック
Backtickのインラインコード表記
コメント
まとめ

Octopressでのコードの書き方

Markdownパーサーとして初期設定にある rdiscount を使っている場合

Markdown形式で4字下げする
{% codeblock %}~ {% endcodeblock %}で囲う
GitHubで出来る様に3点Backtick`で囲う
1点Backtickで囲ってインラインで表示する

と言ったコードの書き方があります ¹ ² 。他にもコードを書いたファイルを挿入したり ³、 gistを載せたりすることも出来ます。

4字下げだと行番号とかが出ないシンプルなものになり、 {% codeblock %}や3点Backtickだとファイル名を載せたりコードのハイライトしたりすることが出来ます。

rdiscountの代わりにkramdown を使っている場合は現状3点Backtickは使えません ⁴。

Octopressのスニペットが上手く表示できない

コード表記にしても、 {% ~ %} で囲まれる部分や Markdownの一部(リンク等)は変換させられてしまうため、単純に

{% codeblock %}
{% include article.html %}
{% endcodeblock %}

の様な物を書くと{% include article.html %} の所が変換されてしまいます。

そこで、最初は{,}をそれぞれ{,}としたりしてしのいでいました。

ただこれにも問題があって、3点Backtickやインラインコードだとそのまま {等となってしまうので使えません。 codeblock内では使えるのですが何故かcodeblockにファイル名を与えたり表示言語を与えたりすると怒られてしまいます。

rawブロック

と無理やりな事をしていたのですが、実はrawブロックと言うものが用意されていて

{%  codebrock %}
{%  raw %}
{%  include article.html %}
{%  endraw %}
{%  endcodeblock %}

と書くことでrawブロック内をそのまま表示することが出来ます。この方法だとハイライトも効かせられる様になるし、ファイル名等も与える事が出来ます。

もしくは

{{ "{% " }} include article.html %}

の様に、{% の前後を{{ "~" }}で囲ってしまえばそこで一旦変換がはさまれるので無視され、下の様にちゃんと表示されます。

追記: 2016/12/27

ちなみにこの例からも分かるように、 %}等、閉じる方はいきなり出てきてもTagとは認識されないので直接コードや出力として書くことが出来ます。

逆に %}を{{ "~" }}で囲うと最初の {{ と干渉するのかエラーが出ます。 }}に関してはJekyll 3だとWarningが出ます。

追記ここまで

{%  include article.html %}

従って、rawブロック自体を表示したい場合

{{ "{% " }} raw %}
...
{{ "{% " }} endraw %}

の様にraw、endrawの部分をrawブロックの外側で書いてあげるとrawブロック内でrawブロック自身を表示させてあげることが出来ます。

Backtickのインラインコード表記

Backtick`はインラインコードを書くために使うので、これ自身を書くにはどうしたものか、と思って少し(結構)悩みました。

普通にcodeblockでは

`

このように単にcodeblockで囲ったりするだけで大丈夫なんですが、インラインコードとして3つ並べても上手くいきません。

色々やった結果、最初から

<code>`</code>

と書いてしまえば`この様に上手くいきました。まあ、当然と言えば当然なんですが…

コードとは直接関係ありませんが、 Octopress Blogで触れられてない(と思う)けどブロックのうち commentも結構重要だと思うのでついでに載せておきます。

HTMLソースには載せたくないけどメモや注意書きをsourceの中に書いて置きたいときや、一部をコメントアウトしておきたい時等は

{% comment %}
...
{% endcomment %}

を使います。

ちょっと違った使い方として、この記事とかはvimで Markdownのハイライトを付けて書いているのですが、上の

`

の表記の時、`が単独で表れるので以降全てコード表示用にハイライトされてしまいます。

そこで

{% codeblock %}
`
{% comment %}
`
{% endcomment %}
{% endcodeblock %}

の様な感じで書いて、途中でハイライトを止めています。 (多分もっと賢い方法があると思いますが…)

まとめ

rawやcommentはOctopress関連のページ等を見てもなかなか見つからなかったのですが、一歩帰ってOctopressのフレームワークプログラムの jekyll ⁵ や、さらにそのjekyllが採用しているテンプレートエンジンの Liquid ⁶ とかまで戻って調べて見ると結構簡単にやりたいこと見つかったりしました。

まだまだ知らないけど知ってる人は結構当たり前に使われてる物とかもありそうです。

また関係ないですが、それにしても、プラグイン読むに、rubyを全く知らない、ってのは大変です。(rubyを知らないのになんでOctopress始めたんだ、って話ですが)。これ始めたころはRakefileだとかGemfileだとかも、なんなんだ、という状態で殆どおまじない状態。今のところ仕事上rubyが必要になることは無いと思いますが、丁度良い機会ができて、趣味としてrubyも軽く使える様に勉強していこう、と思う今日このごろです。