jekyll で syntax heilight

jekyll で syntax heilight

環境

Python 3.3.0
ruby 1.9.3p392 (2013-02-22 revision 39386) [x86_64-linux]
jekyll-1.0.2
jekyll-bootstrap
redcarpet-2.3.0
pygments.rb-0.5.0

したこと

1). pygmentsのインストール

$ curl -O http://python-distribute.org/distribute_setup.py

※ 大文字のオー、ゼロではない

$ sudo python distribute_setup.py
$ sudo easy_install pygments

2). jekyll でつかう Gem に redcarpetを追加

Gemfileに一行追記

$ vi Gemfile

gem "redcarpet"

3). jekyll の _config.ymlを編集

$ vi _config.yml

この行の下に

pygments: true

以下一行追記

markdown: redcarpet

4). jekyll で syntax highlight するときに使う cssファイルを作る

色の見本は以下のサイトにある
Pygments Themes
http://igniteflow.com/pygments/themes/

pygmentizeのカラースキームをcssファイルとして書き出す

$ pygmentize  -S colorful -f html > colorful.css
$ pygmentize  -S pastie -f html > pastie.css

作成した cssファイル を 移動

$ mv colorful.css assets/themes/twitter/css/colorful.css
$ mv pastie.css assets/themes/twitter/css/pastie.css

5). jekyll の テンプレート に css ファイルへのリンクを追加

$ vi _includes/themes/twitter/default.html

headの部分に以下一行追記

<link href="{{ ASSET_PATH }}/css/colorful.css" rel="stylesheet" type="text/css" >

6). テストファイルを作る

$ rake page name="pages/test_syntax-highlight.md"
$ vi pages/test_syntax-highlight.md

test_syntax-highlight.mdの例

    ---
    layout: page
    title: "Rubyをはじめる準備"
    description: ""
    ---
    {% include JB/setup %}

    Syntax Highlight の、テスト

    ```ruby
       puts "hello ruby"
    ```

7). mdファイルからhtmlファイルを作り、jekyll で syntax highlightが有効になっているか確認する

$ jekyll build
$ jekyll serve

ブラウザで確認
localhost:4000/pages/test_syntax-highlight.html

参考

Jekyll の 0.12.0 でシンタックス ハイライトが便利になった - てっく煮ブログ
http://tech.nitoyon.com/ja/blog/2012/12/25/jekyll-0-12-0/

30分のチュートリアルでJekyllを理解する
http://melborne.github.io/2012/05/13/first-step-of-jekyll/


たのしいRuby 第3版: 高橋 征義, 後藤 裕蔵, まつもと ゆきひろ