SyntaxHighlighter Evolved を使ってみる
WordPressに便利機能を追加してくれるのがプラグインです。
ちょっと前から使っているのが、ソースコードを見やすくしてくれて行番号もふってくれる「SyntaxHighlighter Evolved」です。
ウェブ上でソースコードを表示するときって、どうやって書くのが正解なのか正直言ってよくわかりません。preタグの中でさらにcode要素としてソースを書くのが一般的なようなので、このサイトでもそれに習っていました。ただソースコード部分は、そのままだとうまく表示されないので、実体参照変換してから貼り付けるとかいろいろと面倒。
そういうのを非常に楽ちんにしてくれるのが、「SyntaxHighlighter Evolved」なわけです。
こんなふうに表示してくれます。
SyntaxHighlighter Evolved のスクリーンショット
ステキだ。記入時に実態参照変換も必要ありません。
使い方も簡単。ソースの内容を例えばcssならば、[ css ] cssソース [ /css ] というふうにソース内容に合わせて囲ってあげるだけ。
で、例によってウェブサイトデザインに合わせて外観イメージを少しいじってみます。こんな感じで
<div id="menu"> <ul> <li>Home</li> <li>Themes</li> <li>About</li> </ul> </div>
「SyntaxHighlighter Evolved」を組み込むと、pluginsフォルダの中のsyntaxhighlighterの中にさらにsyntaxhighlighterがあってその中にstylesフォルダががあります。中には、cssファイルがいろいろはいっています。
今回は、shThemeDefault.cssを元にして改変します。「SyntaxHighlighter Evolved」でDefault設定を使う場合参照しているのは、shCore.cssとshThemeDefault.cssのふたつなので、shThemeDefault.cssの後ろの方にshCore.cssの変更分も合わせて下記のcssを書き加えました。
/*shThemeDefault.css改変部分*/
.syntaxhighlighter
{
background-color: #e7e5dc !important; /*行番号部分の色*/
}
/* Highlighed line number */
.syntaxhighlighter .line.highlighted .number
{
background-color: #ffdc40 !important; /*ハイライトしたときの行番号色*/
color: black !important; /*ハイライトしたときの行番号文字色*/
}
/* Highlighed line */
.syntaxhighlighter .line.highlighted.alt1 .content,
.syntaxhighlighter .line.highlighted.alt2 .content
{
background-color: #ffdc40 !important; /*ハイライトしたときのコード行色*/
}
/* Add border to the lines */
.syntaxhighlighter .line .content
{
border-left: 3px solid #fff !important; /*行番号とコードの境界*/
}
/* Second line */
.syntaxhighlighter .line.alt2 .content
{
background-color: #f6f6f6 !important; /*偶数行の色*/
border-right: 3px solid #fff !important; /*偶数行の右端にボーダー追加*/
}
.syntaxhighlighter .line .content .block
{
background: url(wrapping.png) 0 1.5em no-repeat !important; /*改行アイコン 行間調整*/
}
.syntaxhighlighter .toolbar /*ツールバーのバックカラー消去*/
{
background-color: transparent !important;
border: none !important;
}
.syntaxhighlighter /*追加項目*/
{
width: 90% !important;
overflow: auto !important;
margin: 18px auto 36px !important;
border: 1px dotted #959aa1 !important;
}
.syntaxhighlighter:before /*タイトル部分追加*/
{
display: block !important;
content: "Source Code";
color: #6f6e69 !important;
background-color: #e7e5dc !important;
height: 20px !important;
width: auto !important;
padding-left: 5px !important;
border-bottom: 3px solid #fff !important;
}
/*shCore.css改変部分*/
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
line-height: 1.5em !important; /*行間調整*/
}
.syntaxhighlighter
{
padding: 0px !important; /* 外周のpaddingは無し */
}
.syntaxhighlighter .toolbar
{
padding: 2px 8px 2px 0 !important; /* ツールバー表示調整 */
}
お気に召したら、使ってみてください。
本当は、WordPressサイト管理画面の「SyntaxHighlighter Evolved」設定にある「Additional CSS Class(es)」という項目で、自分で作ったcssを読み込めるのかなと思ったんですが、使い方がよくわかりませんでした。英語のページもあさってみましたが、なにしろ英語は苦手なもんでチンプンカンプン。誰かこの設定の使い方わかった人がいたら、教えてください。
そんなわけで、ここでは単純にshThemeDefault.cssの後ろに書き足したというわけです。
わからないついでに、もうひとつ。
頭のところで「Source Code」と表示するようにしてありますが、できれば「CSS」とか「HTML」とかソースに合わせて表示したいところです。
前のバージョンでは、class名が”html”などとなっていたので、書き分けられましたが「Evolved」ではclass名が”brush: xml;”などとなっています。これってcssであつかうときは、どうしたらいいんだろう？よくわかりません。
「教えて、えらい人！」
詳しい導入方法、使い方などは、下記サイトをご覧になるとわかりやすいと思います。
こんな画像を作って:beforeの中に入れて位置を調整してあげれば、
