「SyntaxHighlighter」の文字サイズ変更
「各要素ごとの設定項目」の記事で説明したとおり、「SyntaxHighlighter」は
<pre class="brush: javascript; font-size: 200%">
<pre class="brush: javascript; class-name:'syntax_sample'">
のように各要素ごとに文字サイズやCSSの独自クラスが指定できるはずなのだがうまくいきませんでした。
DOMをみてみると「font-size:」は、ライブラリで何も反映されていないようであり、「class-name:」は各行などでライブラリクラスが指定されていて上書きされているようでです。そこでライブラリコアのCSSを解析変更してみようと思います。
ライブラリ生成タグ
「SyntaxHighlighter」ライブラリが生成するタグをみてみます。
CSSだけで変更できるように、ライブラリ生成タグ内のCSSクラスをみてみます。
「syntaxhighlighter」「bar」「lines」「number」「content」「block」「plan」などで各行、各項目のデザイン制御をしているようです。
ライブラリCSSの調査
上記CSSクラスで各行の背景色など細かい制御できるようですが、今回はフォントサイズだけを変更したいのでその箇所だけ調べてみます。
【ｓｈCore.css】
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
outline: 0 !important;
background: none !important;
text-align: left !important;
float: none !important;
vertical-align: baseline !important;
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
height: auto !important;
width: auto !important;
/*
line-height: 1.1em !important;
font-family: "Consolas", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
*/
line-height: 15px;
font-family: "ＭＳ ゴシック", "Monaco", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace ;
font-weight: normal !important;
font-style: normal !important;
/*
font-size: 1em !important;
*/
font-size: 12px;
}
コード表示部分の文字サイズを制御している箇所は「ｓｈCore.css」内の上記CSSクラスに記述されていました。32行目の「font-size」によりサイズを変更できますが、その影響で行間などのバランスが悪くなってので25行目で行間を調整しました。26行目はコードが見やすいようにフォントの種類を「ＭＳ ゴシック」に変更しました。
これで文字サイズを変更することができました。
CSSをみるとほとんどの設定で 「!important」が設定されています。これでは各ページごとにデザインをCSSにより上書き修正できません。恐らく下手にCSSを書き換えられたらデザインが崩れるので「!important」設定しているのでしょう。CSSに自信のある方は「!important」を外すことにより、各ページ・各要素ごとに自由に変更できると思われるので挑戦してみてください。
2009 年 10 月 28 日 水曜日 【 カテゴリー: 便利なライブラリ,API 】
