loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
Home > [Wordpress] > 【Wordpress】SyntaxHighlighter Evolvedの表示をちょっとカスタマイズ
この記事は約5分で読めます。
この記事は最終更新日から5年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2011.7.4

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

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

 

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

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

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

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

SIRIUSレビューイメージ画像

インストール

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表示画像

以上です。

参考サイト

記事はお役にたてましたか?

記事にご興味をもっていただけましたら
下のソーシャルボタンで共有していただけると嬉しいです^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「SWEETY (TCD029)」 

コメント(0件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

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

先頭へ