rouge で syntax highlighting

目次

code highlighter rouge

rouge は Ruby で実装された syntax highlighter であり、 pygments と CSS の互換性がある。

これまではなんとなく coderay を設定していたが、 rouge の方が対応している言語が多いようなので乗り換えることにした。

_config.yml の設定

markdown: kramdown
kramdown:
  input: GFM
  hard_wrap: false
  enable_coderay: false
  syntax_highlighter: rouge

highlighter: rouge という設定も可能だが、 この設定はハイライトの指定を liquid タグで書くことになる。

Markdown 記法だけで書きたいので、kramdown に rouge による syntax highlighting を指定する。

syntax highlighting 用の CSS

とりあえず使ってみるならば、rougify コマンドで既存のテーマの CSS を出力すればよいだろう。

$ rougify help style
usage: rougify style [<theme-name>] [<options>]

Print CSS styles for the given theme.  Extra options are
passed to the theme.  Theme defaults to thankful_eyes.

options:
  --scope       (default: .highlight) a css selector to scope by

  available themes:
    base16, base16.dark, base16.monokai, base16.monokai.light, base16.solarized,
    base16.solarized.dark, colorful, github, molokai, monokai, monokai.sublime,
    thankful_eyes
$ rougify style base16.dark > syntax.css

しかし、普段使っているエディタでの配色にしたくなる。

rouge が出力する class にどのようなものがあるのかがよくわからなかったが、 List of tokens というページに説明があった。

これを見ながら vim で長年使っている配色になるべく近づけてみた。

$fg-color: #cccccc;
$bg-color: #002c2d;
$comment-color: #fa8072;  // salmon
$keyword-color: #da70d6;  // orchid
$constant-color: #ffff00; // yellow
$type-color: #ffa500;     // orange
$attr-color: #00ffff;     // cyan
$inserted-color: #00ff00;
$deleted-color:  #ff0000;

.highlight {
  table td { padding: 5px; }
  table pre { margin: 0; }
  code {
    color: $fg-color;
  }
  &, .w {
    color: $fg-color;
    background-color: $bg-color;
  }
  .err {
    color: #151515;
    background-color: #ac4142;
  }
  .k, .kc, .kd, .kn, .kp, .kr {
    /* keyword */
    color: $keyword-color;
  }
  .kt {
    /* type */
    color: $type-color;
  }
  .na {
    /* attribute */
    color: $attr-color;
  }
  .nb, .bp {
    /* builtin name */
    color: $keyword-color;
  }
  .nc {
    /* class name */
    color: $type-color;
  }
  .no {
    /* constant */
    color: $constant-color;
  }
  .ne {
    /* exception */
    color: $keyword-color;
  }
  .nf {
    /* function name */
    color: $attr-color;
  }
  .nl {
    /* label */
    color: $attr-color;
  }
  .nt {
    /* tag name */
    color: $keyword-color;
  }
  .vc, .vg, .vi {
    /* class, global, instance variable */
    color: $attr-color;
  }
  .s, .sb, .sc, .sd, .s2, .sh, .sx, .sr, .s1, .ss {
    /* string */
    color: $constant-color;
  }
  .se {
    /* escape sequence */
    color: $keyword-color;
  }
  .si {
    /* interpolation */
    color: $keyword-color;
  }
  .m, .mf, .mh, .mi, .il, .mo, .mb, .mx {
    /* number */
    color: $constant-color;
  }
  .ow {
    /* word operator */
    color: $keyword-color;
  }
  .p, .pi {
    /* punctuation */
    color: $fg-color;
  }
  .c, .cd, .cm, .c1, .cs {
    /* comment */
    color: $comment-color;
  }
  .cp {
    /* preprocessor */
    color: $keyword-color;
  }
  .gh {
    /* headline */
    color: $keyword-color;
    font-weight: bold;
  }
  .gi {
    /* inserted text */
    color: $inserted-color;
  }
  .gd {
    /* deleted text */
    color: $deleted-color;
  }
}

コードブロックの書き方

上記の CSS の内容であれば以下のように書く。

```scss
$fg-color: #cccccc;
$bg-color: #002c2d;
$comment-color: #fa8072;  // salmon
$keyword-color: #da70d6;  // orchid
$constant-color: #ffff00; // yellow
$type-color: #ffa500;     // orange
$attr-color: #00ffff;     // cyan
$inserted-color: #00ff00;
$deleted-color:  #ff0000;

.highlight {
  table td { padding: 5px; }
  table pre { margin: 0; }
  code {
    color: $fg-color;
  }
}
```

ところで YAML はあまりいい感じハイライトされないな。