ホーム > プラグイン, CSS, Wordpress > WordPress 記事内でソースを表記するプラグイン Syntax Highlighter for WordPress

WordPress 記事内でソースを表記するプラグイン Syntax Highlighter for WordPress

2010 年 5 月 24 日 コメントをどうぞ コメント

WordPressの本文(記事内)でHTMLやCSS、PHPなどのソースをきれいに表示するプラグインはいくつかあるのですがこのブログで使っているのはSyntax Highlighter for WordPress。

Syntax Highlighter for WordPressのダウンロード先( http://wppluginsj.sourceforge…….ghlighter/ )からzipファイルをダウンロードして解凍。
プラグインフォルダにアップロード後、使用開始すればいいだけという、誰にでも簡単にはじめられるプラグインです。

Syntax Highlighter系のプラグインは他にもたくさんあるのですが、テーマとの絡みでしょうか。
このブログにはSyntax Highlighter for WordPressが一番しっくり来ました。

本文内では半角の大カッコ [] で[css]とか[html]とか[php]とかを括ってソースを記述し、最後に[/css]や[/html]、[/php]などで閉じるだけ。

具体的にはこんな感じで記述。

[css] .hogehoge {background-color : #FFF ;}[/css]

記事本文の[css]などは全角の大カッコ使ってますのでコピペすると動かないので注意して下さい。
[css]などの必要タグはAdd Quick Tagプラグインを導入して、登録しておくと記事の作成が楽になります。

この先は自分のちょっとCSSカスタマイズメモ。
デフォルトに#e3e3e3の外枠を付けてみました。

syntax-highlighter/css/shThemeDefault.css にボーダーを追加します。
shThemeDefault.cssの冒頭を以下に変更。

.syntaxhighlighter
{
	background-color: #fff !important;
}

.syntaxhighlighter
{
	background-color: #fff !important;
	border:1px solid #e3e3e3 !important;
}

以上、これだけでだいぶ見やすくなります。

ちなみにフォントサイズやスタイルを変更するには syntax-highlighter/css/shCore.css を触ります。
このブログではフォントファミリーにMS ゴシックを追加しています。

font-family: "MS ゴシック", "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl(バザール)に追加このエントリをChoixに追加このエントリをnewsingに追加
  1. コメントはまだありません。
  1. トラックバックはまだありません。
:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!:

願いをかける 星を下さい~ ♪

Positions by Seo-Watcher