【WordPress】SyntaxHighlighter Evolvedの表示をちょっとカスタマイズ

Total 63 views
この記事の所要時間は約 5分です。

HTMLコードや CSSコードを見やすくしてくれるワードプレスプラグインといえば
「SyntaxHighlighter」が有名かと思います。
当ブログでも利用しています。

でも見せ方が画一的なのでちょっとカスタマイズしてみました。

スポンサーリンク


 

イメージ画像

 

一口に「SyntaxHighlighter」といっても様々な派生物があるようで
当ブログで利用しているのは「SyntaxHighlighter Evolved」というプラグインです。

今回のカスタマイズのポイントは
背景を透明にし、ライン分割を排除し、どのコードを表示しているのか明示的にわからせること。

もちろんそれ以外のカスタマイズも可能です。

それと SyntaxHighlighter Evolved は内部的にバージョン2かバージョン3のどちらかを選択するようになっているんですが、
私はバージョン2を使っているので以降の説明もバージョン2が前提となっています。

 

インストール

SyntaxHighlighter Evolvedをワードプレスにインストールすると
「wp-content」→「plugins」フォルダに「syntaxhighlighter」というフォルダが作られ
そこに全ファイルがダウンロードされます。

その中にある「syntaxhighlighter2」フォルダ→「styles」フォルダ内の
”shCore.css””shThemeDefault.css”をいじくればカスタマイズ可能というところまでは調べがついたので、あとは自力でそれっぽいところを調整してみます。

 

デフォルト表示を確認してみる

SyntaxHighlighter Evolved の場合
HTMLコードなら[html]と[/html]の間
CSSコードなら[css]と[/css]の間にコードを書けば
その通りに表示されるようになっています。

たとえば下記のコードですが、

上記コードをそのままの形で表示させたい場合は、
[html]
<head>
<title>サンプルテスト</title>
<link href="css/default.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/design.css" rel="stylesheet" type="text/css" media="all" />
</head>
[/html]

という感じで[html]と[/html]ではさんであげれば、
デフォルト設定で下記のように表示されます。

syntaxhighlighterデフォルト表示画像

表記上[]は全角になってますが実際には半角です。

shThemeDefault.css をカスタマイズ

上記デフォルト表示を少しずつ変えてみます。

カスタマイズの注意点として、失敗した時に元に戻せるようオリジナルファイルのコピーは必ず作っておきましょう。

親切設計の行の色替えをわざと外す

微妙に 1行おきに色分けされている行色分けを取り除いてみます。

syntaxhighlighterカスタマイズ説明画像

 

「syntaxhighlighter」→「syntaxhighlighter2」→「styles」→「shThemeDefault.css」77行目と 83行目を削除もしくはコメント扱いにします。

あるいは別の色に指定してもいいでしょうし他のプロパティを加筆してもいいでしょう。

css設定画像

 

これでラインの背景色は消せました。
でもまだ背景色が白のままです。

syntaxhighlighter表示画像

白の背景色も取ってしまう

背景に何か指定してあってその背景を見せたいときに使えます。

白の背景色は次の場所に記述されています。
「syntaxhighlighter」→「syntaxhighlighter2」→「styles」→「shThemeDefault.css」38行目を削除もしくはコメント扱いにします。

あるいは別の色に指定してもいいでしょうし他のプロパティを加筆してもいいでしょう。

css設定画像

 

これで透明になりました。(背景画像が見えるようになった)

syntaxhighlighter表示画像

特定のラインを目立たせたい、例えば 4行目をハイライト表示させたいときは[html highlight="4"][css highlight="7"]([]は表示都合上、全角になってるので半角に変更のこと)などのように記述します。複数行指定なら[html highlight="4,10"]のように。

表示色は以下の部分を書き換えることでカスタマイズ可能です。「shThemeDefault.css」 53行目の「background-color」をお好みの色に。

他にも行番号そのものを消したいは 「gutter="false"」、ツールバーを非表示したいときは「toolbar="false"」を付けてあげます。

薄くなったボーダーを逆に目立たせる

上の画像でわかるかと思いますが
ボーダーがちょっと目立たないので色を強調させてみます。

ついでにマウスオーバーで現れるツールバーの背景もカットしてみます。

「syntaxhighlighter」→「syntaxhighlighter2」→「styles」→「shThemeDefault.css」の 39行目と 88行目を削除もしくはコメント扱いにします。

あるいは別の色に指定してもいいし他のプロパティを加筆してもいいでしょう。

css設定画像

 

ボーダーが濃くなりました。

syntaxhighlighter表示画像

行番号と縦のボーダー色を変えてみる

行番号と縦のボーダー色が気に入らないので別の色に変えてみます。

「syntaxhighlighter」→「syntaxhighlighter2」→「styles」→「shThemeDefault.css」59行目と 65行目をカスタマイズします。

css設定画像

 

個人的にはこの方が好みです。

syntaxhighlighter表示画像

以上です。

参考サイト

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)