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

SyntaxHighlighter Evolved

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

目次

使い方

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

SyntaxHighlighter Evolved

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

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

SyntaxHighlighter Evolved

ソースコードタグの種類

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

ソースコードの種別タグ
HTMLhtml
Plain Textplain, text
CSScss
PHPphp
JavaScriptjavascript

ショートコード

highlight

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

SyntaxHighlighter Evolved

title

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

SyntaxHighlighter Evolved

テーマ

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

Default

SyntaxHighlighter Evolved

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;*/
  • URLをコピーしました!
目次