CodeColorerで色を変える

プログラムをホームページに載せたい!
だけとそのままだと色が付かないし、かといって自分で色と付けていくことは面倒なのでしたくない。
それでも見やすさにこだわりたい。

いろいろ探したら、”CodeColorer”というプラグインを使えば自動的にプログラムに色が付き、よさそうだ、という結論になりました。
ただ、実際に使ってみるとハイライトされるところが気に入らない。

僕は今までテキストエディタはemacsを使っていて、その色分けは好きだったのでそれに似た色になってくれないものかなぁと思っていました。
そんな都合のいいものはなかったので自分でソースをいじって、色を変えてみました。
あと追加したりもしました。

以下のはfortranの場合です。知らないながらもやってみたものなので綺麗な方法じゃありません。


いじるべきコードの箇所はプラグイン→プラグインの編集,”CodeColorer”を選択して、

  1. codecolorer/codecolorer.css
  2. codecolorer/lib/geshi/fortran.php

の2つです。
まず、fortranのファイルを適当に書きます。
そしてCodeColorerで出力させます。

program main
    implicit none
    integer::c
    integer,allocatable::jjj(:)
    double precision::x,y,z
    call system_clock(count=c)
    write(6,*)"\(^o^)/"
    stop
end program main

とかです。(上の例では僕がもう変更してしまったものなので、元の配色ではありません。)

まず公開、もしくはプレビューでとりあえず書き出させます。
その後、HTMLの開発ツールのアドオンであるFirebugとか、chromeであればF12キーを押してその画面を開きます。
firebugでの画像
例えばwriteという文字列の色を変えたければそこにカーソルを合わせてhtmlのどこの文であるかを突き止めます。
上の場合では、そこに該当する文は
<span class=”kw1″ >write</span>
というところになるでしょう。
ここでclass=の後のkw1というところを覚えておきます。
(重要なのはkwと1です。これは今回の場合、キーワードによって色を変えるのでkwというクラス、1はキーワードの中での分類で、1に属している、ということを表しています。)

そして、codecolorer/codecolorer.css ファイルを開きます。
このファイルはプログラム中で割り振りられたキーワードをclassという名前で分類し、そのclassが何であるかで何色をつけるかを決める、そんな感じのためのファイルです。

codecolorer.cssファイルの中から
” .codecolorer .kw1 ”
という部分があると思うのでその文に注目します。
その分の最後に{ color: #〇〇〇〇〇〇; }というものがあると思うのでそこに変えたい色のコードを16進数によって指定します。

はい。これで色が変わります。
注意点としては、classがkw1に振り分けられているのがwriteという単語だけではないかもしれない、ということです。
また、kw2,kw3というclassと同じ色を使いなさいという設定になっているかもなので、改行してkw1だけの色変更ということをしたほうがいいかもしれません。
試して、不都合が出たら考えましょう。

キーワードの追加、変更

もともと、”allocatable”,”implicit”,”none”というキーワードはclassをみたら”integer”,”write”などと同じ色をしていて目指すemacsのハイライトと違っていました。上の方法ではクラスが同じだったら違う色にすることはできません。
そこで、割り振りられるクラスを変えるべく、別のファイルをいじりました。
codecolorer/lib/geshi/fortran.phpというファイルを編集します。

このファイルの中にはfortranで見かけるよく見知ったキーワードがたくさんあります。

僕がとった方法は、”allocatable”,”implicit”,”none”を変更したい色になっているキーワードと同じところにおいてやればうまいことなるんじゃないか?ということです。
コピーして、貼り付けてをやっていけば、うまいことできました。

こんな感じで目指すものに近い色になっていきました。多分別の言語でも似た構造になっていると思うので、めでたしめでたしでしょう。

最後に、僕の使っている2つのファイルを書き残しておきます。
codecolorer/codecolorer.css

codecolorer/lib/geshi/fortran.php


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です