このブログでプログラミングなどのソースコードなどを表示したいときに、そのままコードを貼り付けてもうまく表示されません。
特にHTMLのソースコードなどはタグなどをそのまま書いても表示されません。
そんなときに便利なプラグインがあります。
SyntaxHighlighter Evolved
SyntaxHighlighter EvolvedはWebサイト上でエディタのように綺麗にソースコードを表示できるプラグインです。Webサイト上でHTML、CSSやプログラミングのコードを解説ときに便利です。
例えばHTMLのソースコードを以下のように表示することができます。
<html> <body> HTMLのソースコードがこんなふうに表示されます。 </body> </html>
使い方
インストールはWordPressから「SyntaxHighlighter」で検索すれば出てきます。
細かい使い方や設定方法はググってもらうとして、基本的な使い方はソースコードの種別ごとに用意されたショートコード([]で囲んだもの)をで表示したいソースコードを囲みます。
上記の例では以下のように書くことで表示されます。
[html]
<html>
<body>
HTMLのソースコードがこんなふうに表示されます。
</body>
</html>
[/html]
| ソースコードの種別 | Brushes |
|---|---|
| XML | xml, xhtml, xslt, html, xhtml |
| Plain Text | plain, text |
| CSS | css |
| PHP | php |
| JavaScript | js, jscript, javascript |
| ActionScript3 | as3, actionscript3 |
| Bash/shell | bash, shell |
| ColdFusion | cf, coldfusion |
| C# | c-sharp, csharp |
| C++ | cpp, c |
| Delphi | delphi, pas, pascal |
| Diff | diff, patch |
| Erlang | erl, erlang |
| Groovy | groovy |
| Java | java |
| JavaFX | jfx, javafx |
| Perl | perl, pl |
| PowerShell | ps, powershell |
| Python | py, python |
| Ruby | rails, ror, ruby |
| Scala | scala |
| SQL | sql |
| Visual Basic | vb, vbnet |
これでソースコードの解説などがしやすくなりますね。