ワードプレス(WP)でソースコードを綺麗に表示

WPがクラッシュしてからプラグインに頼った運用を嫌い、現在はショートコードでソースコード表示をしています。
ワードプレス(WP)でソースコード表示にプラグインはデメリット多いから中止

HTMLやCSS、PHPなどのソースコードに、行番号を追加したりハイライトなどで強調し見やすくします。色々なブログで採用されていますね。

簡単にリサーチしたところ、最も有名なのは「SyntaxHighlighter Evolved」というプラグインのようで、たしかに良く目にします。しかしJavascriptを利用しているのか、表示まで時間がかかっているブログが多数あったこと、標準のデザインが若干好みにあわなかったなどで、別のプラグインを導入することにしました。

もっとシンプルなものを探していると、ありました。

WP-Syntax

こちらも知名度が高いようで紹介ブログも沢山あります。プラグインをインストールして、コピペしたソースコード(preタグ)に「lang=”css”」と言語の種類を属性として追加します。これによりハイライト表示される単語が変わります。たったこれだけです。

追記:HTMLタグで使われる&<>などの特殊文字をエスケープしてくれる属性もありました「escaped=”true”」。言語によっては必須属性です。

さらに追記:「escaped=”true”」などの属性は、エディタをビジュアルに切り替えると勝手に消えてしまいます。なので指定しなくても常に”true”になるように元のコードを修正しました。plugins/wp-syntax/wp-syntax.phpの下記の行が常に実行されるようにします。

if ($escaped == "true") $code = htmlspecialchars_decode($code);

↓変更後

$code = htmlspecialchars_decode($code);

下は対応言語の一覧です。すごい数ですね。

The following languages are supported in the lang attribute:

abap, actionscript, actionscript3, ada, apache, applescript, apt_sources, asm, asp, autoit, avisynth, bash, bf, bibtex, blitzbasic, bnf, boo, c, c_mac, caddcl, cadlisp, cil, cfdg, cfm, cmake, cobol, cpp-qt, cpp, csharp, css, d, dcs, delphi, diff, div, dos, dot, eiffel, email, erlang, fo, fortran, freebasic, genero, gettext, glsl, gml, bnuplot, groovy, haskell, hq9plus, html4strict, idl, ini, inno, intercal, io, java, java5, javascript, kixtart, klonec, klonecpp, latex, lisp, locobasic, lolcode lotusformulas, lotusscript, lscript, lsl2, lua, m68k, make, matlab, mirc, modula3, mpasm, mxml, mysql, nsis, oberon2, objc, ocaml-brief, ocaml, oobas, oracle11, oracle8, pascal, per, pic16, pixelbender, perl, php-brief, php, plsql, povray, powershell, progress, prolog, properties, providex, python, qbasic, rails, rebol, reg, robots, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, sql, tcl, teraterm, text, thinbasic, tsql, typoscript, vb, vbnet, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xml, xorg_conf, xpp, z80

ちなみにテーマによって表示がずれる場合があるようで、このプログで現在使っているテーマ「Twenty Ten」もダメでした。下のCSSを追加すれば直るので載せておきます。

/*  ##################################
    WP-Syntax用
    ################################## */
#content .wp_syntax table { margin: 0px; width: 100%;}
#content .wp_syntax table tr td { padding: 0px; }
#content .wp_syntax table td.line_numbers { width: 23px; padding-left: 2px; padding-right: 2px; text-align: right; }
#content .wp_syntax pre { margin: 0; overflow-x: auto; padding: 2px; }
#content .line_numbers pre { background-color: #def; color: gray; }

 

広告