rcmdnk's blog
Last update

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

Octopressでのコードの書き方

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

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

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

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

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

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

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

1
2
3
{% codeblock %}
{% include article.html %}
{% endcodeblock %}

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

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

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

rawブロック

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

1
2
3
4
5
{%  codebrock %}
{%  raw %}
{%  include article.html %}
{%  endraw %}
{%  endcodeblock %}

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

もしくは

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

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

追記: 2016/12/27

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

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

追記ここまで

1
{%  include article.html %}

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

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

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

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

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

普通にcodeblockでは

1
`

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

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

<code>`</code>

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

コメント

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

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

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

を使います。

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

1
`

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

そこで

1
2
3
4
5
6
{% codeblock %}
`
{% comment %}
`
{% endcomment %}
{% endcodeblock %}

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

まとめ

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

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

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

Sponsored Links
  1. Sharing Code Snippets

  2. Codeblock

  3. Include Code

  4. kramdownを使うメリットは色々あるのでこれに切り替えている人も多いようです。

    1つはPHP Markdown Extra 記法もサポートしていて、footnotesをプラグイン無しでサポートしています。

    さらにOctopress and the Twilight Color Scheme にあるようにkramdown+coderayでコードがより美しく?出来る様になるみたいで、 このGitHub用のを試してみたいな、と思って1回試したんですが、 色々と不具合が出て(3点Backtickが使えない、目次(generate_toc)が使えない、 さらにgenerateで色々エラーが出て進めなくなった)断念しました。

    rdiscountも実は 2.0.7から同じようにfootnotesをサポートしている 様ですが、まだ改行が上手く出来ないなど問題があるみたいです。

    さらにrdiscount-2.0.7だと、`で囲ったインラインコードの表記が変わって、 通常の文章のなかでは単なる強調表示みたいになります。 (タイトルやテーブル中で使うのと同じ状態。)多分バグ?

    GitHubでのissue で2.1.5でgenerate_toc時に出来るHTML invalidなコードをfixする、という話が 3ヶ月前にありますが、現状の2.0.7はインストールせずに、 これ出るの待ってから更新した方が良いかもしれません。 (一度2.0.7にしてまた1.6.8に戻しました。)

  5. 30分のチュートリアルでJekyllを理解する

  6. Liquid for Designers

Sponsored Links

« OctopressへFont Awesomeの導入 OctopressのGist表示の調整 »

}