設定ファイルをハイライトしてブログに載せたい
ブログ書くときに Linux のシェルスクリプトや設定ファイルの内容をハイライト表示して綺麗に載せようとして色々調べてみたときのメモ。
ブログで利用されているものとしては SyntaxHighlighter というものが有名らしいですね。私も試してみて確かにソースコードは綺麗にハイライトされるんですがどうしても気に入らない点が一つ。それは・・・
というわけで、他のやり方を模索してみて結局 vi (vim) の機能を使うことにしました。ブログに載せたい設定ファイルを vim で編集して以下の手順で HTML 化します。
ちなみに私は pre 要素のスタイルを直接変更するのが何となく嫌だったので、上記の CSS の pre の部分を消して別途 Term クラスを用意して <pre class="Term"> のようにして使っています。 CSS は詳しくないんですがちゃんと表示されているんでまあこれでいいかな。
あと、Linux であれば highlight という便利なコマンドがあることを知りました。これについてもそのうち使ってみようと思います。
ブログで利用されているものとしては SyntaxHighlighter というものが有名らしいですね。私も試してみて確かにソースコードは綺麗にハイライトされるんですがどうしても気に入らない点が一つ。それは・・・
- 設定ファイルだとうまいことハイライトされない!
というわけで、他のやり方を模索してみて結局 vi (vim) の機能を使うことにしました。ブログに載せたい設定ファイルを vim で編集して以下の手順で HTML 化します。
- 設定に HTML オプションを追加
- HTML 変換
- CSS をブログのヘッダに追加
- 本文をブログ記事にコピー
vim のコマンドラインモードで HTML のオプションを設定します。
let html_use_css=1パラメータ名の通りですが、 html_use_css を設定することで CSS と本文が分割されます。頻繁に使うようであれば .vimrc に書いておくといいですね。
コマンドラインモードで TOhtml と入力してください。
TOhtml画面が上下に分割されて、上画面に HTML 化されたコードが出力されます。
例えば、 vim でこんな感じのファイルを編集したとします。
set nocompatible syntax on "set autoindent let html_use_css=1これを TOhtml で HTML 化するとこんなコードが出力されます。
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>~/.vimrc.html</title> <meta name="Generator" content="Vim/7.2" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <style type="text/css"> <!-- .Constant { color: #ff6060; } .Type { color: #00ff00; } .Comment { color: #8080ff; } .PreProc { color: #ff40ff; } pre { font-family: monospace; color: #000000; background-color: #ffffff; } body { font-family: monospace; color: #000000; background-color: #ffffff; } .Statement { color: #ffff00; } --> </style> </head> <body> <pre> <span class="Statement">set</span> <span class="PreProc">nocompatible</span> <span class="Statement">syntax</span> <span class="Type">on</span> <span class="Comment">"set autoindent</span> <span class="Statement">let</span> html_use_css<span class="Statement">=</span><span class="Constant">1</span> </pre> </body> </html>
出力された HTML の CSS の部分をブログのヘッダに追加します。下の例では <pre> の部分で黒背景に白字に変更しました。この辺はお好みで。
pre { font-family: monospace; color: #ffffff; background-color: #000000; } .Comment { color: #8080ff; } /* blue*/ .Constant { color: #ff6060; } /*red*/ .Identifier { color: #00ffff; } /*cyan*/ .PreProc { color: #ff40ff; } /*magenta*/ .Special { color: #ff40ff; } /*magenta*/ .Statement { color: #ffff00; } /*yellow*/ .Type { color: #00ff00; } /*green*/さっきの例にいくつかクラスを追加していますが、 TOhtml で出力される CSS のクラス名にはだいたい上記のものが出てくるようです。同じ色でもクラス名が別のもので出力されたことがある(上記の magenta )んですが、なぜなのかはちゃんと調べていません。そのうち TOhtml のソースでも眺めてみようかと思いますが、とりあえずはこれでよしとします。
TOhtml で出力されたコードの <pre> で囲まれた部分をブログにコピーします。
<pre> <span class="Statement">set</span> <span class="PreProc">nocompatible</span> <span class="Statement">syntax</span> <span class="Type">on</span> <span class="Comment">"set autoindent</span> <span class="Statement">let</span> html_use_css<span class="Statement">=</span><span class="Constant">1</span> </pre>するとめでたく下のように表示されるわけですね。
set nocompatible syntax on "set autoindent let html_use_css=1
ちなみに私は pre 要素のスタイルを直接変更するのが何となく嫌だったので、上記の CSS の pre の部分を消して別途 Term クラスを用意して <pre class="Term"> のようにして使っています。 CSS は詳しくないんですがちゃんと表示されているんでまあこれでいいかな。
.Term { font-family: 'Courier New', Courier, monospace; color: #ffffff; background-color: #000000; overflow: auto; padding: 0.5em; }
あと、Linux であれば highlight という便利なコマンドがあることを知りました。これについてもそのうち使ってみようと思います。