設定ファイルをハイライトしてブログに載せたい

ブログ書くときに Linux のシェルスクリプトや設定ファイルの内容をハイライト表示して綺麗に載せようとして色々調べてみたときのメモ。

ブログで利用されているものとしては SyntaxHighlighter というものが有名らしいですね。私も試してみて確かにソースコードは綺麗にハイライトされるんですがどうしても気に入らない点が一つ。それは・・・
  • 設定ファイルだとうまいことハイライトされない!
まあ当たり前なんですけどね。

というわけで、他のやり方を模索してみて結局 vi (vim) の機能を使うことにしました。ブログに載せたい設定ファイルを vim で編集して以下の手順で HTML 化します。




  1. 設定に HTML オプションを追加

  2. vim のコマンドラインモードで HTML のオプションを設定します。
    let html_use_css=1
    
    パラメータ名の通りですが、 html_use_css を設定することで CSS と本文が分割されます。頻繁に使うようであれば .vimrc に書いておくといいですね。


  3. HTML 変換

  4. コマンドラインモードで 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>
    


  5. CSS をブログのヘッダに追加

  6. 出力された 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 のソースでも眺めてみようかと思いますが、とりあえずはこれでよしとします。


  7. 本文をブログ記事にコピー

  8. 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 という便利なコマンドがあることを知りました。これについてもそのうち使ってみようと思います。

このブログの人気の投稿

zsh 設定 - プロンプト -

運転免許失効〜再取得までの奮闘記 - 期限切れ -

運転免許失効〜再取得までの奮闘記 - 路上練習 -