WordPressにソースコードを表示させるプラグイン SyntaxHighlighter Evolved

WordPressのプラグインSyntaxHighlighter Evolvedを使うとソースコードをコピペでそのまま貼りつけ表示することができます。

使い方

使い方は簡単！ソースコードを[html]・・・[/html]で囲むだけ。

HTMLのソースコードを書いてみる

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

ソースコードタグの種類

html 以外にも php や css などのタグがあるのでご参考ください。

ショートコード

highlight

highlight="1,5,10-12"
1行目、5行目、10～12行目をハイライト表示してくれます。

title

title="サンプルタイトルAAAAA"
コードの前にタイトルを表示してくれます。

テーマ

SyntaxHighlighter Evolvedには色々なデザインテーマが用意されています。管理画面で設定できますのでお好みに変更してみてください。

Default

Django

Eclipse

Emacs

Fadetogrey

Midnight

Rdark

補足:Firefoxだと表示がずれる！

Firefoxだと表示がずれていたのでCSSで修正しました。

WordPressのインストールフォルダ/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

44行目のvertical-align: baseline !important; をコメントアウト。

/*vertical-align: baseline !important;*/