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

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

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

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



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

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


  2. HTML 変換

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


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

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


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

    5. 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 設定 - プロンプト -

プロンプトの見た目をカスタマイズします。人によって個性が出るところですね。 プロンプト PROMPT='[%n@%m]# ' RPROMPT='[%d]' おそらくシェルをカスタマイズしはじめたときに真っ先に設定いじるところじゃないですかね。私も昔は凝ったものに設定してましたが結局上のようなシンプルなものに落ち着きました。 上の例では PROMPT でホスト名とユーザ名、 RPROMPT でカレントディレクトリを出力していて、こんな感じになります。 [root@localhost]# [/root] PROMPT は画面左端、 RPROMPT は画面右端に出力されます 。 プロンプトは他にも種類がありますが、普段あまり目にすることはないので特に設定は不要です。以下簡単に説明します。  PROMPT2, RPROMPT2 コマンドが複数行になった時に表示されるプロンプトです。 PROMPT3 selece 文を使った時に表示されるプロンプトです。 PROMPT4 よくわかりません。見たことがありません。 SPROMPT correct で訂正の候補を出すときに表示されるプロンプトです。 プロンプトに色付けたりもできます。以下のような設定に変えることで・・・  PROMPT= '[%F{magenta}%B%n%b%f@%F{blue}%U%m%u%f]# ' RPROMPT= '[%F{green}%d%f]' こんな感じの表示になります。 [ root @ localhost ]#  [ /root ] ただし、色々デコろうとすると PROMPT の設定自体が一見して理解し難くなり次に設定を変えようとするときに結構大変ですので、シンプルなものをおすすめします。 #autoload -U colors #colors 設定の中のこの2行は色設定に凝っていた時の名残です（笑） プロンプトで利用できるエスケープ文字 カスタマイズするときに使いそうなものをリストアップしてます。  パラメータ 出力内容 例 %M ホスト名 localhost.localdomain %m ホスト名 localhost %n ユーザ名 r
続きを読む

テンションを上げたいときにおすすめの曲（StarrySky YEAH! Remix）

youtubeを徘徊していたら懐かしい曲に出会ったので記念にメモ。最初に投稿されたのはたぶんニコニコ動画かな。youtubeのほうは他人の転載っぽかったので、オリジナルのニコ動のほうを載せておきます。かなり中毒性あり。 StarrySky YEAH! Remix これのなにがすごいかって、まったく別々の3つの曲を組み合わせて作っているということ。マッシュアップと言うらしい。あまりの完成度の高さに驚愕した。 @Novoiski さんという方のmixだそうです。元となった曲とアーティストはこちら。 Starry Sky: capsule Technologic: Daft Punk Ch-Check It Out: Beastie Boys これにさらに IKZO （吉幾三）を掛け合わせたもののほうが有名かも。そっちもオススメ。
続きを読む

OpenLDAP のログ周りの設定をする

OpenLDAP のログをファイルに出力するようにします。ついでにログのローテートも設定します。 【前提】 OS: Scientific Linux 6 ログ出力 rsyslog じゃなくて syslog だった頃は /etc/syslog.conf に直接設定を追記していたんですが、 rsyslog だと IncludeConfig というものがデフォルトで設定されてるんですね、知らなかった。 # Include all config files in /etc/rsyslog.d/ $IncludeConfig /etc/rsyslog.d/*.conf というわけで、 /etc/rsyslog.d/ に設定ファイルを作ります。 # vi /etc/rsyslog.d/ldap.conf ファイルの中身はこのようにします。 # LDAP logs local4.* -/var/log/ldap 利用頻度の高い LDAP サーバだと、ログの出力がボトルネックになる可能性があるので、ログファイル名の指定の前に - （ハイフン）をつけて非同期書き込みにするのを忘れずに。 設定が完了したら rsyslog を再起動します。 # service rsyslog restart 再起動後 /var/log/ldap というファイルができているはずです。 ログローテート logrotate の設定を変更します。 rsyslog 経由で出力しているログファイル達のローテート設定 (/etc/logrotate.d/syslog) に ldap のログも追記するだけです。 # vi /etc/logrotate.d/syslog 赤字の部分を追記します。 /var/log/cron /var/log/maillog /var/log/messages /var/log/secure /var/log/spooler /var/log/ldap { sharedscripts postrotate /bin/kill -HUP `cat /var/run/syslogd.pid 2> /dev/null` 2> /dev/null || true endscri
続きを読む