2015/06/22  WordPress 

SyntaxHighlighter Evolved

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

使い方

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

SyntaxHighlighter Evolved

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

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

SyntaxHighlighter Evolved

ソースコードタグの種類

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

ソースコードの種別 タグ
HTML html
Plain Text plain, text
CSS css
PHP php
JavaScript javascript

ショートコード

highlight

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

SyntaxHighlighter Evolved

title

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

SyntaxHighlighter Evolved

テーマ

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

Default

Default

Django

Django

Eclipse

Eclipse

Emacs

Emacs

Fadetogrey

Fadetogrey

Midnight

Midnight

Rdark

Rdark

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

SyntaxHighlighter_firefox

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

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

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

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