てるてるブログ

てるてるぼうずの日常やらお勉強やら

SyntaxHighlighter

Posted on | 6月 4, 2015 | No Comments

ちょこっと改装ついでにソースコード表示を「SyntaxHighlighter」に変更。

前の「Snippet-Syntax Highlighter」も可愛くて好きだったんですけどね。
どうも最近はドロップシャドウは無しの傾向なようで(フラットデザインっての?)。

バージョン違いで3種類あるようですが、とりあえず最新バージョンの3.x系を選択。

以前のバージョンに比べてFLASHによるクリップボードへのコピー機能が削除され、1行おきに色が変わるデザインが無くなってて、コードが長くなると折り返されずにスクロールバーが表示されます。
ちょっとそこらへん悩みどころだったんですが、ダブルクリックでテキスト表示されてコピーしても行番号が入らないってのがシンプルでよさそうだったんで3.x系にしました。

基本的にはhead内に下記の指定をする形で使用。

<script src="../scripts/shCore.js"></script>
<script src="../scripts/shBrushXml.js"></script>
<script src="../scripts/shBrushPhp.js"></script>
<script src="../scripts/shBrushJScript.js"></script>
<script src="../scripts/shBrushCss.js"></script>
<link rel="stylesheet" href="../styles//shCoreDefault.css">
<script>
SyntaxHighlighter.all();
</script>

上記はデフォルトのテーマでHTML(shBrushXml.js)とphp(shBrushPhp.js)、JavaScript(shBrushJScript.js)、CSS(shBrushCss.js)の読み込む例です。

またshCore.jsは必須。
stylesフォルダ内にあるcssファイルから自分が使いたいテーマ用のcssを選んでください。

オートローダー(shAutoloader.js)を使うって手もあるみたいなんですが、上記の4種類で充分だったのでそちらは見送りました。

オートローダーの使い方等詳しい設置法は下記のサイトさんが分かりやすいです。

wordpressだとプラグインもあるみたいです。

Snippet-Syntax Highlighterとはclassの指定方法が違っているので全部書き換えるか並行して使うかと悩んだけど、jQueryを使ってclass属性を追加することにして解決。
古い指定は削除出来ないかとも思ったけど、なんか色々めんどくさくなりそうなのでそのまま(^^;)
ちょっと重たいかも…

ま、しかしjQueryって便利っすね。

トラックバックURL:

Comments

Leave a Reply





*

About

てるぼうず

てるてるぼうずな日常やらお勉強やら

旧ブログ倉庫 »
旧ブログの記事をお探しの方はこちらから

Admin