Re:VIEW(EPUB)でコードリストをシンタックスハイライトする方法

Re:VIEW シンタックスハイライト

Re:VIEW シンタックスハイライト

rougeでシンタックスハイライト

2018年8月、Re:VIEWのEPUB生成でrougeを使用してコードリストをシンタックスハイライトにしました。

Re:VIEWのバージョンは2.5.0です。


rougeのバージョンは3.2.0です。


Windows10に書籍執筆支援システム「Re:VIEW」をインストールして使用しています。

Windows10に Re:VIEW 執筆支援システムをインストールする方法

ソースコードリスト

Re:VIEW フォーマットガイドによると、原稿にソースコードを入れるには、4種類の方法があります。

連番 行番号 コマンド
あり なし //list[識別子][キャプション][言語指定]{ ~ //}
あり あり //listnum[識別子][キャプション][言語指定]{ ~ //}
なし なし //emlist[キャプション][言語指定]{ ~ //}
なし あり //emlistnum[キャプション][言語指定]{ ~ //}
  • 識別子 : リストを参照するときのID
  • キャプション : リストのタイトル
  • 言語指定 : ソースコードの言語(省略可能)

ソースコードを参照するときは、@<list>{識別子}と記述します。

Re:VIEWテスト原稿

下記のようなテスト原稿(sample6.re)を作成します。
C++言語のソースコードリストを行番号付きで入れます。言語指定はどのように記述するか不明ですが、取りあえず「cpp」としました。

EPUB生成

生成したEPUBを確認します。

EPUB コードリスト

EPUB コードリスト

すっきりしたコードリストですが、少々不満があります。

  • 等幅フォントでないのでリストが見づらい
  • コードリストの背景に薄い色があったほうがよい

PDF生成

生成したPDFを確認します。

PDF コードリスト

PDF コードリスト

TeXらしく美しいコードリストです。等幅フォントでリストは見やすいです。

コードリストの改善

Re:VIEWで生成したEPUBの内容を解析してみます。EPUBをzip解凍して、コードを確認します。(OEBPS>sample6.xhtml)

codeクラスの<DIV>タグで全体を囲み、list language-cppクラスの<PRE>タグでソースコードを囲んでいます。

スタイルシートの変更で解決できそうです。

スタイルシートは、config.ymlで指定します。

スタイルシートstyle.cssの定義を確認します。

listクラスの<PRE>タグに、背景色(background-color:)とフォントファミリー(font-family: monospace )を追加します。

生成したEPUBを確認します。

EPUB コードリストの改善

EPUB コードリストの改善

等幅フォントでコードリストがそろい、またコードリストの背景に色がつきました。

rougeでシンタックスハイライト

listコマンドの言語指定は省略可能ですが、どのような意味を持つのでしょうか。

Re:VIEW フォーマットガイドに次のように記載があるだけで詳細は不明です。

言語指定は、ハイライトを有効にしたときに利用されます。

Re:VIEWでハイライトができそうです。しかし、方法がわかりません。Re:VIEWは素晴らしいツールなのですが、情報が少なくて苦労します。

調べてみると、config.ymlにハイライトの設定がありました。

知ってる人は当たり前のことなのでしょうが、私はrougeやpygmentsは何なのかわかりません。rougeについて調べてみると、RougeはRubyで書いたシンタックスハイライトのようです。

An elegant, extendable code highlighter written in pure Ruby.
純粋なRubyで書かれたエレガントで拡張可能なコードハイライター。

デフォルトでは、コメントアウトになっていたので highlight:を有効にしてhtml: “rouge”を選びます。

外部gemが必要と書いてあるので、別途インストールが必要です。

生成したEPUBを確認すると、少しだけシンタックスハイライトになりました。

EPUB コードリスト rouge組み込み

EPUB コードリスト rouge組み込み

想像していたハイライトとは違って少し地味です。

CSS定義で改善

Re:VIEWで生成したEPUBの内容を解析してみます。EPUBをzip解凍して、コードを確認します。(OEBPS>sample6.xhtml)

codeクラスの<DIV>タグで全体を囲み、テーブルで行番号とコード本体を分離し、rouge-codeクラスの<PRE>タグでソースコードがわからないぐらい<span>による装飾をしています。

rouge用のスタイルシートが必要みたいです。調べてみると、rougeはスタイルシートを生成できるみたいです。

スタイルシートをリダイレクトしてrouge.cssに出力します。

スタイルシートは、config.ymlで指定しています。

rouge.cssも追加します。

生成したEPUBを確認します。

EPUB コードリスト rouge+CSS

EPUB コードリスト rouge+CSS

とてもカラフルなシンタックスハイライトになりました。

rougeの言語指定

//listコマンドの言語指定は、rougeに渡されるわけです。rougeが認識する言語指定について調べてみます。

百種類以上の言語を指定できるようです。C++言語の言語指定は、cppで正解でした。

CSS定義でもう少し改善

等幅フォントではないのでコードリストがそろっていません。スタイルシートをもう少し修正します。

スタイルシートrouge.cssの定義の最後に下記を追加します。

生成したEPUBを確認します。

EPUB コードリスト rouge+CSS 等幅フォント

等幅フォントになりコードリストがそろいました。

まとめ

書籍執筆支援システム「Re:VIEW(EPUB)」でrougeを使用してコードリストをシンタックスハイライトにしました。

Re:VIEW(EPUB)は、外部ツールで拡張してスタイル変更により見え方を変更できるのでとても便利です。

 

 

 

このエントリーをはてなブックマークに追加

Re:VIEW(EPUB)でコードリストをシンタックスハイライトする方法」への2件のフィードバック

  1. ピンバック: Amazon Kindleの電子書籍を作成する方法 | ある計算機屋さんの手帳

  2. ピンバック: 電子書籍執筆ツール Re:VIEWのリンク集 | ある計算機屋さんの手帳

コメントは受け付けていません。