2015/06/22  2015/06/28  WordPress 

SyntaxHighlighter Evolved

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

使い方

使い方は簡単!ソースコードをで囲むだけ。

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;*/

関連記事