読者です 読者をやめる 読者になる 読者になる

#chiroito ’s blog

Java を中心とした趣味の技術について

SyntaxHighlighterの追加

Bloggerに切り替えるにあたってSyntaxHighlighterを導入しようと考えました。

理由は格好良いから。

まずは導入
FaziBear's Blogger Widgetsここへアクセスします。
「Add to Blogger」ボタンを押しブログを選択します。
「タイトル」入力欄入力して「ガジェットを追加」ボタンを押すだけです。

参考:クリボウの Blogger Tips

しかし、この状態では6行程度(100px)しか表示されず、
それに満たない場合は灰色で埋められてしまい格好悪いです。

そのため、CSSを修正します。

一番上の方にある.dp-highlighterにheight: 100%;を追加します。

.dp-highlighter { font-family: "Consolas", "Courier New", Courier, mono, serif; font-size: 12px; background-color: #E7E5DC; width: 99%; overflow: auto; margin: 18px 0 18px 0 !important; padding: 1px 0 0 0 !important; height: 100%; }

また、Blogger対応のSyntaxHighlighterは1.5.1をベースにしていますが、
1.5.1ではbashが対応していないので組み込んでみました。

http://alexgorbatchev.com/SyntaxHighlighter/から2.1をのソースを取得します。
注:3.0では実装方法が大幅に異なっていた為。

先ほど追加したガジェットを編集して下から3行目を下記の様に追加します。

dp.sh.Brushes.Ruby.prototype=new dp.sh.Highlighter();dp.sh.Brushes.Ruby.Aliases=['ruby','rails','ror'];
//ここから組み込み
dp.sh.Brushes.Bash=function()
{
var keywords='if fi then elif else for do done until while break continue case function return in eq ne gt lt ge le';
var commands = 'alias apropos awk basename bash bc bg builtin bzip2 cal cat cd cfdisk chgrp chmod chown chroot' +'cksum clear cmp comm command cp cron crontab csplit cut date dc dd ddrescue declare df ' +'diff diff3 dig dir dircolors dirname dirs du echo egrep eject enable env ethtool eval ' +'exec exit expand export expr false fdformat fdisk fg fgrep file find fmt fold format ' +'free fsck ftp gawk getopts grep groups gzip hash head history hostname id ifconfig ' +'import install join kill less let ln local locate logname logout look lpc lpr lprint ' +'lprintd lprintq lprm ls lsof make man mkdir mkfifo mkisofs mknod more mount mtools ' +'mv netstat nice nl nohup nslookup open op passwd paste pathchk ping popd pr printcap ' +'printenv printf ps pushd pwd quota quotacheck quotactl ram rcp read readonly renice ' +'remsync rm rmdir rsync screen scp sdiff sed select seq set sftp shift shopt shutdown ' +'sleep sort source split ssh strace su sudo sum symlink sync tail tar tee test time ' +'times touch top traceroute trap tr true tsort tty type ulimit umask umount unalias ' +'uname unexpand uniq units nset unshar useradd usermod users uuencode uudecode v vdir ' +'vi watch wc whereis which who whoami Wget xargs yes';
this.regexList=[
{regex:dp.sh.RegexLib.SingleLinePerlComments,css:'comment'},
{regex:dp.sh.RegexLib.DoubleQuotedString,css:'string'},
{regex:dp.sh.RegexLib.SingleQuotedString,css:'string'},
{regex:new RegExp(this.GetKeywords(keywords),'gm'),css:'keyword'},
{regex:new RegExp(this.GetKeywords(commands),'gm'),css:'keyword'}
];
this.CssClass='dp-ba';
}
dp.sh.Brushes.Bash.prototype=new dp.sh.Highlighter();dp.sh.Brushes.Bash.Aliases=['bash', 'shell'];
//ここまで組み込み
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
-->

ここまでが完了するとこのページの様にclass="bash"を指定すればコマンド等がハイライトされるようになります。