ソースをお洒落に表示する方法

ワードプレスのカスタマイズを紹介しているサイトでは、ソースコードを綺麗に表示していてとてもわかりやすいですよね。

真似てみようと探してみました。

SyntaxHighlighter Evolved　というプラグインを使用して、表示させているのがわかりました。

使い方は簡単でした。

1. ワードプレス管理画面からプラグイン→新規追加を選択。
2. 「SyntaxHighlighter Evolved」を検索→「今すぐにインストール」→「プラグインを有効化」

あとは投稿のテキストエディタで表示したいコードをペーストして以下のタグで挟めば表示されます

[php]if( get_theme_option(‘headline_font’) == ‘Choose a font’ || get_theme_option(‘headline_font’) == ”) { ?>
h1,h2,h3,h4,h5,h6,.header-title,#main-navigation, #featured #featured-title, #cf .tinput, #wp-calendar caption,.flex-caption h1,#portfolio-filter li,.nivo-caption a.read-more,.form-submit #submit,ol.commentlist li div.comment-post-meta, .home-post span.post-category a,p#site-description {
font-family: Meiryo, ‘メイリオ’, Hiragino Kaku Gothic Pro, ‘ヒラギノ角ゴ Pro W3′,sans-serif;[/php]

こんな感じに表示されます。

cssの場合：[

[css]ソースコード[/css]

]

PHPの場合：[

[php]ソースコード[/php]

]

HTMLの場合:[

[html]ソースコード[/html]

]

他にもいろいろ機能がついてます。