WordPress備忘録-ソースコードを見やすく表示するプラグイン『SyntaxHighlighter Evolved』 


今日やっと導入できたので備忘録として掲載します。

【『SyntaxHighlighter Evolved』の導入方法】

1.ダウンロード
http://wordpress.org/extend/plugins/syntaxhighlighter/

2.アップロード
ダウンロードし解凍すると[syntaxhighlighter]というフォルダができるので丸ごと wp-content/plugins へ。

3.プラグインの有効化
プラグイン管理から 操作>使用する のところををぽちっと押して有効化。

4.記事にソースコードを書く
書き方は何種類かあるみたいですが、自分は<pre>で囲むのに少し抵抗があったので[code]で囲むやり方を採用しています。

[code lang=&quot;plain&quot;]<br />
コードいろいろ
[&frasl;code]
参考サイト:
SyntaxHighlighter Evolved 導入

サポートしている言語については上記参考リンクにも紹介されています。
[code lang=”言語”]の言語部分に何を入れていいか迷ってしまった時の自分用メモとして以下残しておきます。syntaxhighlighter.php の上部に記述されてあるソース(デフォルト時)。

'as3'           =&amp;amp;amp;gt; 'as3',
'actionscript3' =&amp;amp;amp;gt; 'as3',
'bash'          =&amp;amp;amp;gt; 'bash',
'shell'         =&amp;amp;amp;gt; 'bash',
'c-sharp'       =&amp;amp;amp;gt; 'csharp',
'csharp'        =&amp;amp;amp;gt; 'csharp',
'cpp'           =&amp;amp;amp;gt; 'cpp',
'c'             =&amp;amp;amp;gt; 'cpp',
'css'           =&amp;amp;amp;gt; 'css',
'delphi'        =&amp;amp;amp;gt; 'delphi',
'pas'           =&amp;amp;amp;gt; 'delphi',
'pascal'        =&amp;amp;amp;gt; 'delphi',
'diff'          =&amp;amp;amp;gt; 'diff',
'patch'         =&amp;amp;amp;gt; 'diff',
'groovy'        =&amp;amp;amp;gt; 'groovy',
'js'            =&amp;amp;amp;gt; 'jscript',
'jscript'       =&amp;amp;amp;gt; 'jscript',
'javascript'    =&amp;amp;amp;gt; 'jscript',
'java'          =&amp;amp;amp;gt; 'java',
'jfx'           =&amp;amp;amp;gt; 'javafx',
'javafx'        =&amp;amp;amp;gt; 'javafx',
'perl'          =&amp;amp;amp;gt; 'perl',
'pl'            =&amp;amp;amp;gt; 'perl',
'php'           =&amp;amp;amp;gt; 'php',
'plain'         =&amp;amp;amp;gt; 'plain',
'text'          =&amp;amp;amp;gt; 'plain',
'ps'            =&amp;amp;amp;gt; 'powershell',
'powershell'    =&amp;amp;amp;gt; 'powershell',
'py'            =&amp;amp;amp;gt; 'python',
'python'        =&amp;amp;amp;gt; 'python',
'rails'         =&amp;amp;amp;gt; 'ruby',
'ror'           =&amp;amp;amp;gt; 'ruby',
'ruby'          =&amp;amp;amp;gt; 'ruby',
'scala'         =&amp;amp;amp;gt; 'scala',
'sql'           =&amp;amp;amp;gt; 'sql',
'vb'            =&amp;amp;amp;gt; 'vb',
'vbnet'         =&amp;amp;amp;gt; 'vb',
'xml'           =&amp;amp;amp;gt; 'xml',
'xhtml'         =&amp;amp;amp;gt; 'xml',
'xslt'          =&amp;amp;amp;gt; 'xml',
'html'          =&amp;amp;amp;gt; 'xml',
'xhtml'         =&amp;amp;amp;gt; 'xml',

プラグイン管理>SyntaxHighlighter Evolved>Settings からいろいろとカスタマイズできるのでcssなども表示用に追加したりすると楽しそうですね!

動作しない時の対処法(というか失敗談)

実はSyntaxHighlighter Evolved導入時、まったく表示されませんでした。途方にくれていましたが、探すと原因もちゃんとありました。
header.phpの</head>の前に<?php wp_head(); ?>、footer.phpの</body>の前に<?php wp_footer(); ?>を必ず記述しないといけないようです。

プラグインの関係でヘッダーの方には入れてあったんですが、自分の場合フッターの方にこの記述がなかった為に動かなかったみたいです。
ヘッダーもしくはフッターを修正してもプラグインが動かない場合は、プラグイン管理の方でエラーが出てないかチェックしてみた方がいいかもしれません。
SyntaxHighlighter Evolvedにエラーが出ていたら、一度プラグインを無効化して再度有効化するとエラーが消えるかも(自分の場合はこれで直りました)。
これでも動かない場合は…、ちょっと分からないです。とりあえず自分の失敗談と解決策を載せておきます。

参考サイト:
SyntaxHighlighter EvolvedのSetting
<?php wp_head(); ?>を使わないと動かないプラグインがある

「WordPress備忘録-ソースコードを見やすく表示するプラグイン『SyntaxHighlighter Evolved』 」へのコメント1件

  1. […] WordPress備忘録-ソースコードを見やすく表示するプラグイン『SyntaxHighlighte… […]

コメントは受け付けていません。