MS Access Tips/Sample and VBA and Blog customize etc...

SyntaxHighlighter 3.0 をカスタマイズする

Customize_the_SyntaxHighlighter3.0

前回の記事で導入したSyntaxHighlighter3.0ですがデフォルトのままではいろいろ不満がありますので、自分好みにカスタマイズしてみました。

難易度:

縦スクロールバーを消す

shCore****.css ファイルをエディターで開きます。(このブログの場合は、shCoreRDark.css)「.syntaxhighlighter {」をキーワードに検索すると下記の部分が表示されますので、下記のように1行を追加します。

長いコードが折り返しされるようする

デフォルトでは長い行が折り返されずに横スクロールバーが出現します。

2.0では折り返しができたのに、3.0ではなぜできなくなったのか、また、できるようにする方法などは下記に詳細な解説がありますので、興味がある方は参照してください。

Syntaxhighlighter3.0.83で長い行を折り返して表示する – Waka8*Stakes

上記でエディターで開いた shCore****.css ファイル を「.syntaxhighlighter .line {」のキーワードで検索します。その{}内を下記のように変更します。

これでcssファイルの修正は完了です。保存してブログにアップロードします。

このままだと折り返された時、行番号が実際のコードとずれてしまいますので、行番号を非表示にします。(行番号を表示したい場合は、折り返しは諦めてください、行番号の表示と折り返しは3.0では両立できません)

サイトのHTMLのスクリプトを実行するメソッドの前に下記のように規定値の設定変更を追加します。

これで下記のようにスクロールバーは表示されず、長い行も折り返されます。

コードのハイライト表示1

1行毎に交互に背景色を変える

SyntaxHighlighter は1行毎に alt1 alt2 というクラス属性を付加しています。

shCore****.css ファイルを開いて「.line.alt1 {」で検索します。そこの下記のセクションの背景色をお好みに変更してください。

上下左右の余白を付ける

さらにデフォルトだと上下左右の余白が0なので、すこし余白を付けます。「縦スクロールバーを消す」でコードを追加したセクションにさらに padding を追加します。

これで下記のような結果表示になります。

コードのハイライト表示2

まとめ

これで2.0とほぼ同じ見た目になりました。

2.0の場合、IEでコピーした場合は不必要な改行が追加されてしまうという不具合も解消されました。

「クリップボードへ送る」ボタンは無くなりましたが、もともとIEでは使えなかったです。

代わりにダブルクリックでプレーンテキスト表示になり全選択されるので、そのまま Ctrl+C でコピーできます。フォーカスが外れると元のハイライト表示に戻ります。これはシンプルで使いやすいですね。

IEだとダブルクリックでプレーンテキスト表示したときに改行が削除されたような表示になりますが、コピーして貼り付けると改行はちゃんと残っています。

IEでダブルクリック

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/473-93d29bfb
該当の記事は見つかりませんでした。