SyntaxHighlighter Evolvedの導入とカスタマイズ

04Thumb

ブログのデザインを変更したので、そのソースコードを載せようと思ったんですが、『そもそもみんなどうやってコードを載せているんだろう』と、ネットで検索。
SyntaxHighlighter Evolvedというプラグインの存在を知り、インストールしてCSSをカスタマイズしてみました。

デザインの変更点

ブログデザインはサイドバーの『RECENT POST』を、タイトルだけの表示からサムネイルをプラス。

before

after

もともとサイドバーの項目は全部ウィジェットを使って出力していたのを『RECENT POST』の部分だけ、WordPressテンプレートタグを使って、サムネイルと記事タイトルの一覧に変更しました。

『SyntaxHighlighter Evolved』とは

そのコードを記載する前に、
『SyntaxHighlighter Evolved』とは記事にソースコードを表示するのに便利なwordpressプラグイン(元はjavascriptライブラリ)です。
 
使い方はプラグインなので簡単。
 
プラグイン画面で『SyntaxHighlighter Evolved』で検索して、インストール→有効化。
 
あとは言語が

【html,actionscript3,bash,coldfusion,cpp,csharp,css,

delphi,erlang,fsharp,diff,groovy,javascript,java,javafx,

matlab (keywords only),objc,perl,php,text,powershell,

python,r,ruby,scala,sql,vb,xml】
 
に対応しているので、それぞれのコードを
[言語名]〜[/言語名]
と囲めば完了です。
 
ダッシュボードの『設定』画面で簡単な設定もできます。
(自分は長い行を折り返せるという点と、「バージョン3だとlightboxプラグインと競合する」(?)という情報を見かけたので、バージョン2.Xに)。
syntax
↓がSyntaxHighlighter Evolvedを有効化して、記述した変更前と変更後のソース。

<!--サイドバー-->
<div id="sidebar">
<?php dynamic_sidebar(); ?>
</div>
<!--#sidebar-->

 

<!--サイドバー-->
<div id="sidebar">

<ul>

<li class="post_list">
	<h2 class="widget-title">記事一覧</h2>
		<?php $posts = get_posts('numberposts=5'); ?>
<?php foreach($posts as $post): ?>
	<ul>
		<li class="list" id="list">
		<a href="<?php the_permalink(); ?>" class="recent_thumnail" ><?php the_post_thumbnail(array(60,60), array('class' => 'left')); ?></a>
		<div id="middle"><a href="<?php the_permalink(); ?>" class="recent_text"><?php the_title(); ?></a></div>
		</li>
	</ul>
<?php endforeach; ?>
</li>
<?php dynamic_sidebar(); ?>
</ul>
</div><!--#sidebar-->

(コードの内容はメインではないので割愛)

SyntaxHighlighter Evolvedのデザインをカスタマイズ

上記はデフォルトのテーマを少しカスタマイズしています。
最後にそのカスタマイズの方法を。
コチラの記事を参考にさせてもらいました。

 
デフォルトのテーマのCSSは
wpcontent/plugins/syntaxhighlighter/syntaxhighlighter2/styles/
shThemeDefault.cssにあるので、変更したいCSSのコードをshThemeDefault.cssの最後に加えます。
css※『shCore.css』を変更すると全テーマのデザインを変更できます。
※バージョン3.xをアレンジする場合は『syntaxhighlighter3』フォルダのCSSファイルを変更。
 
追加したコード

.syntaxhighlighter  /*文字サイズ変更*/
{
    font-size:0.875em !important;
}
.syntaxhighlighter:before /*タイトルを追加*/
{
    display: block !important;
    content: "source";
    color: #696969 !important;
    background-color: #ddd !important;
    height: 25px !important;
    line-height:25px;
    width: auto !important;
    padding-left: 5px !important;
    border-bottom: 3px solid #fff !important;
}
.syntaxhighlighter .line .content
{
    border-left: 3px solid #F08080 !important; /*縦ラインの色を変更*/
}
.syntaxhighlighter,
.syntaxhighlighter div,
.syntaxhighlighter code,
.syntaxhighlighter span
{
    line-height: 1.2em !important; /*行間を調整*/
}
.syntaxhighlighter .toolbar
{
    padding: 5px 8px 2px 0 !important; /* 右上のツールバーの調整 */
}

もし上手く動作しない場合はコチラのサイトを参照してみてください。