2013/09/22(日) [n年前の日記]
#2 [hns] ソースコードに色付けをするようにしてみたり
この日記を出力している hns に、ソースコードの色分け・強調をする JavaScript を追加してみようと思い立った。検索した感じでは、以下が使えそうだなと。
_highlight.js
_highlight.jsの使い方 - MWソフト
_SyntaxHighlighter
_ソースコードの装飾表示方法 SyntaxHighlighter
一応両方試してみたのだけど、行番号を表示してくれる SyntaxHighlighter のほうが良さそうかなと。ファイル数が多くてちとアレではあるのだけど。
_highlight.js
_highlight.jsの使い方 - MWソフト
_SyntaxHighlighter
_ソースコードの装飾表示方法 SyntaxHighlighter
一応両方試してみたのだけど、行番号を表示してくれる SyntaxHighlighter のほうが良さそうかなと。ファイル数が多くてちとアレではあるのだけど。
◎ 導入手順メモ。 :
syntaxhighlighter_3.0.83.zip をDL・解凍して、scripts と styles フォルダを、hnsのあるフォルダにコピー。
hns の theme.ph 内の package HNS::ExtHTML; 以下のあたりに、css や JavaScript のソレを追加。
lib/HNS/Hnf/Command.pm の PRE のあたりを書き換え。
元々の記述。
↓ 修正後。
hnf中で、以下の書き方ができるようになった。
自分で付け加えといてなんだけど、たぶん数日後には書き方を忘れてそう。
hns の theme.ph 内の package HNS::ExtHTML; 以下のあたりに、css や JavaScript のソレを追加。
$Head = qq( <link rel="shortcut icon" href="icons/favicon.ico"> <link rel="alternate" type="application/rss+xml" title="RSS" href="${HNS::System::MyDiaryURI}rss.cgi"> <META http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./import.css" type="text/css" media="all"> <script type="text/javascript" src="scripts/shCore.js"></script> <script type="text/javascript" src="scripts/shBrushAS3.js"></script> <script type="text/javascript" src="scripts/shBrushCss.js"></script> <script type="text/javascript" src="scripts/shBrushJScript.js"></script> <script type="text/javascript" src="scripts/shBrushPerl.js"></script> <script type="text/javascript" src="scripts/shBrushPlain.js"></script> <script type="text/javascript" src="scripts/shBrushPython.js"></script> <script type="text/javascript" src="scripts/shBrushRuby.js"></script> <script type="text/javascript" src="scripts/shBrushRuby.js"></script> <script type="text/javascript" src="scripts/shBrushXml.js"></script> <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"> <script type="text/javascript">SyntaxHighlighter.all();</script> );
lib/HNS/Hnf/Command.pm の PRE のあたりを書き換え。
元々の記述。
# PRE package HNS::Hnf::Command::PRE; use vars qw(@ISA $Template $EndTemplate $NumAttr $IsOneline $AllowCommands $IsBeginSection $CountName $OmittableEnd); @ISA = qw(HNS::Hnf::Command::Cite); $AllowCommands = [$HNS::Hnf::Command::Entities{'Inline'}]; $Template = "<pre>"; $EndTemplate = "</pre>";
↓ 修正後。
# PRE package HNS::Hnf::Command::PRE; use vars qw(@ISA $Template $EndTemplate $NumAttr $IsOneline $AllowCommands $IsBeginSection $CountName $OmittableEnd $TemplateWithCode $EndTemplateWithCode $TemplateWithoutCode $EndTemplateWithoutCode); @ISA = qw(HNS::Hnf::Command::Cite); $NumAttr = 1; $Template = qq(<pre class="plain">); $EndTemplate = qq(</pre>); $TemplateWithoutCode = qq(<pre class="plain">); $EndTemplateWithoutCode = qq(</pre>); $TemplateWithCode = qq(<pre class="brush: %1">); $EndTemplateWithCode = "</pre>"; # $TemplateWithCode = qq(<pre><code>); # $EndTemplateWithCode = qq(</code></pre>); $AllowCommands = [$HNS::Hnf::Command::Entities{'Inline'}]; sub AsHTML ($$$){ my ($self, $start, $params) = @_; my $codelang = $self->{attr}->[1]; if ( $codelang ) { $Template = $TemplateWithCode; $EndTemplate = $EndTemplateWithCode; } else { $Template = $TemplateWithoutCode; $EndTemplate = $EndTemplateWithoutCode; } return $self->SUPER::AsHTML($start, $params); }後は hns.css を少し修正したり等。… hns.css って、公式版に含まれてたかな? 自分で勝手に付け加えたのかもしれない。
hnf中で、以下の書き方ができるようになった。
PRE ruby Rubyソースコード /PRE PRE perl Perlソースコード /PRE
自分で付け加えといてなんだけど、たぶん数日後には書き方を忘れてそう。
[ ツッコむ ]
以上です。