株式会社HIKARIA | Web制作会社

WordPressでソースコードを表示するプラグインSyntaxHighlighter Evolved

Webサイト上でエディタのように綺麗にソースコードを表示できるプラグインをご紹介します。

HTMLやCSSはもちろん、PHPやJavaScriptなど、多くの言語の構文強調表示に対応したプラグインです。
このプラグインを利用すると、ソースコードがエディタのように表示できます。

使い方もカンタンなのでWebサイト上でHTML、CSSやプログラミングのコードを解説する機会が多い方は、是非使ってみてください。

SyntaxHighlighter Evolvedをインストールする

WordPressの管理画面・ダッシュボードの「プラグイン」で、「SyntaxHighlighter Evolved」で検索するとすぐにヒットします。

「今すぐインストール」ボタンを押し、その後有効化することで使えるようになります。

「設定」メニューの中には「SyntaxHighlighter」が表示されます。

設定

特に設定の変更をしなくても動作可能なので、カンタンに説明します。

SyntaxHighlighter Evolvedのバージョン

 

  • バージョン2.x
    オンマウスでツールバーが表示されることと、行の折り返しが可能となります(バージョン3.xでは不可能です)
  • バージョン3.x
    ツールバーは表示されません。また、長い行の場合は横スクロールバーが表示されます。
    ソースコードのコピーはドラッグかダブルクリックで選択して行います。

テーマ

ソースコードの表示スタイルを以下の8種類から選べます。

デフォルト

Django

Eclipse

Emacs

Fade to Grey

Midnight

RDark

なし

使い方

使い方は非常に簡単です。

ビジュアルエディタ上で以下のように書きます。

[言語の名前]
ソースコード
[/言語の名前]

例えばCSSのソースコードを表示したい場合は

使用例


[css]

div {

display: block;

}

[/css]

出力例

 
div { 
display: block; 
} 

対応言語

  • actionscript3
  • bash
  • clojure
  • coldfusion
  • cpp
  • csharp
  • css
  • delphi
  • erlang
  • fsharp
  • diff
  • groovy
  • html
  • javascript
  • java
  • javafx
  • matlab (keywords only)
  • objc
  • perl
  • php
  • text
  • powershell
  • python
  • r
  • ruby
  • scala
  • sql
  • vb

基本的な使い方は以上です。