WordPressでソースコードを綺麗に表示する【SyntaxHighlighterEvolved】

皆さんこんにちは新米です。

プログラミングについての記事を書くときにコードを記述すると思います。

そのような時にWebサイト上に綺麗にソースコードを表示する方法としてSyntaxHighlighterEvolvedを使用すると便利です！

実際に使用すると以下のように表示されます。

[サンプルコード]

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        System.out.println("SyntaxHighLighterEvolvedを使用すると");
        System.out.println("この様にコードが綺麗に表示されるよ");
        System.out.println("本記事ではインストールと使用方法について");
        System.out.println("分かりやすく紹介します！！！！！！！！！");
    }
}

 

本記事ではSyntaxHighlighterEvolvedの
インストールとワードプレス内での使用方法を紹介します。

SyntaxHighlighterEvolvedの導入方法

①ダッシュボードの「プラグイン」→「新規追加」を選択

 

②検索バーに「SyntaxHighlighter Evolved」と入力して検索、「いますぐインストール」をクリックします。

※僕の場合は既にインストールしている為「有効」となっています。

 

③インストールが完了したら「有効化」をクリック

※有効化をしないとインストールしても利用できませんので注意。

以上でSyntaxHighlighterEvolvedの導入が完了です。

 

SyntaxHighlighterEvolvedの設定

ダッシュボードの「設定」→「SyntaxHighlighter」を選択

 

設定を開くと以下の画面が表示されます。

では、次に各設定について紹介していきます。

設定画面での設定方法

「コピー時に行番号がコピーされない」「ダブルクリックでコード全選択が行える」といった特徴があので個人的には「バージョン3.x」がオススメです。

「バージョン2.x」だと見た目が少し違うのと、ツールバー等が表示できるようになります。

 

テーマはコード表示時の色が設定できます。

 

例えば、Defaultだと

 

Emacsだと

このように表示されます。

 

一般設定では規定の設定が行えます。

必要だと思うものにはチェックを入れておきましょう。

あまりよくわからない方は初期のままで大丈夫です。

 

「追加のCSSのclass名(複数可能)」は、コードを囲う<div>に任意のclass名をつけれます。

CSSを使用してスタイルを記述したい場合に設定すると良いでしょう。

 

「タイトル」はソースコードの上にタイトルがつけれます。

 

例えば「java」と入力して保存すると、以下のようにコード左上にタイトルが付きます。

 

 

各設定の選択・入力が終わりましたら「変更を保存」を忘れずにクリックしましょう！！

 

SyntaxHighlighterEvolvedの使い方

使い方は超簡単！

まず「テキスト」を開いて自分が記述したコードの前後に以下のように記述します。

記述方法

 

例えばJavaコードを記述してみると・・・

記述し終わったら「プレビュー」で確認してみてください。

ちゃんと表示されていれば成功です！

注意点としましては、ビジュアルでは記述できません。

 

コードが長い場合は自動で横スクロールが着くので改行する心配なしです！

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        
        System.out.println("長い処理コードは横スクロールが自動表示されるよーーーーーーーーー！");
    }
}

 

ハイフン( – )で範囲指定、カンマ( , )で目立たせる箇所が増やせます。

記述方法(例)

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        
        System.out.println("指定した行を目だたせる！");
        System.out.println("指定した行を目だたせる！");
        System.out.println("目立たせない");
        System.out.println("指定した行を目だたせる！");
    }
}

 

先頭の行番号を変更する時は「firstline」を使用します。

記述方法(例)

public class Main {
    public static void main(String[] args) throws Exception {
        // Your code here!
        
        System.out.println("先頭の行番号を変更");
        
    }
}

 

先ほど話した設定画面で、タイトルを決めなくても記事の作成中に指定できます。

記述方法(例)

<?php
// Your code here!
echo 'テキストでタイトル設定';
?>;

SyntaxHighlighterEvolvedの対応言語

他にもSyntaxHighlighterEvolvedでは多くの言語に対応しています。

対応言語	記述方法 [ ] [/]
ActionScript3	actionscript3
Bash/shell	bash, shell
Clojure	clojure
ColdFusion	coldfusion
C/C++	c, cpp
C#	csharp
CSS	css
Delphi	delphi
Erlang	erlang
F#	fsharp
Diff	diff
Groovy	groovy
HTML	html
JavaScript	js, javascript
Java	java
JavaFX	javafx
MATLAB	matlab (keywords only)
Objective-C	objc
Perl	perl
PHP	php
Text	text
PowerShell	powershell
Python	python
R	r
Ruby	ruby
Scala	scala
SQL	sql
Visual Basic	vb
XML	xml

まとめ

いかがだったでしょうか。

僕もそうですがプログラミングに関しての記事を書く方は

SyntaxHighlighterEvolvedプラグインをインストールしておいて損はありません。

見にきてくれる人の気持ちを考えて記事を見やすいように工夫していきましょう！