ソースコードを見やすくしたい - SyntaxHighlighterPlugin3 の導入 - メモ書き

目的

ソースコードを見やすくしたい。
SyntaxHighlighterをTiddlyWikiでも使いたい。

環境

TiddlyWiki 2.6.5
SyntaxHighlighterPlugin3 0.2.1 (http://syntaxhighlighter.tiddlyspace.com/#SyntaxHighlighterPlugin3)
Firefox 14.0.1

解決法

インストール

プラグインの配布元（http://syntaxhighlighter.tiddlyspace.com/#SyntaxHighlighterPlugin3Info）
にインストールの仕方などが書いてある。
けど英語読解力がなくて手間取ったのでメモする。

import
→Enter the URL or pathname hereに、

http://syntaxhighlighter.tiddlyspace.com/#SyntaxHighlighterPlugin3

を入力して open する。
→

• ShBrushCSS.js
• ShBrushJScript.js
• ShBrushPlain.js
• ShBrushXml.js
• ShCore.css
• ShCore.js
• ShThemeDefault.css
• SyntaxHighlighterPlugin3
• SyntaxHighlighterPlugin3Info

を選択して import する。
→
隠し tiddler の StyleSheet に

[[ShCore.css]]
[[ShThemeDefault.css]]

を追加
→save changes
→更新

これで利用できるようになる。

使い方

CSSのコードを表示したいときは

<code class="brush:css">
.cssClass {
   display: block; !important;
}
</code>

と tiddler に打てばよい。

詳しくは http://syntaxhighlighter.tiddlyspace.com/#SyntaxHighlighterPlugin3Info
の、Examples を参照。

取り扱えるコードの種類を増やす

SyntaxHighlighterの本家(http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/)で download してきたshBrush***.jsファイルをそのまま tiddler にコピーする。
タグに systemConfig をつける。

詳しくは http://syntaxhighlighter.tiddlyspace.com/#SyntaxHighlighterPlugin3Info
の、You need a different brush? を参照。

そのほかカスタマイズをしたい

個人的に行ごとに背景色を交互に変えてほしかったので、cssをカスタマイズする。

【FC2】SyntaxHighlighter 3.0.83 修正・カスタマイズ編 -2- (http://recoboo.blog28.fc2.com/blog-entry-89.html)
を参照。

文字サイズを変更する

ShCore.css
.syntaxhighlighterセレクタのfont-sizeプロパティを変更する。

.syntaxhighlighter {
	…
	font-size: .9em !important;
}

雑なメモになってしまったが、とりあえずここまで。

---