【WordPress】ソースコードを綺麗に表示するSyntaxHighlighter Evolvedプラグインの導入方法
【WordPress】ソースコードを綺麗に表示するSyntaxHighlighter Evolvedプラグインの導入方法
スポンサーリンク

記事の中でソースコードをしたい場合、いろいろ方法はありますが、簡単、綺麗に表示するにはWordPressプラグインが最適です。

有名なプラグインにCrayon Syntax Highlighterがありますが、3年も更新されていなく今後使い続けることは避けたいところで、ましてこれから導入することは絶対避けるべきです。

今回は、同様にソースコードを綺麗に表示することができるWordPressプラグイン「SyntaxHighlighter Evolved」の導入方法を初心者向けに分かり易く解説します。

スポンサーリンク

SyntaxHighlighter Evolvedのインストール

SyntaxHighlighter Evolvedのインストール
WordPressプラグインSyntaxHighlighter Evolvedをインストールします。

①左メニューのプラグイン>新規追加:クリックします

②キーワード:「SyntaxHighlighter Evolved」と入力し検索します

③「今すぐインストール」ボタン:SyntaxHighlighter Evolved が表示されたら「今すぐインストール」をクリックします

SyntaxHighlighter Evolvedの有効化

SyntaxHighlighter Evolvedの有効化
SyntaxHighlighter Evolvedのインストールが完了したらプラグインを有効化します。

①「有効化」ボタン:クリックします

スポンサーリンク

SyntaxHighlighter Evolvedの設定

SyntaxHighlighter Evolvedの設定
SyntaxHighlighter Evolvedの設定を行います。
基本的に自分の好みで設定すれば良く、デフォルトのままでも問題ありません。

①左メニューの設定>SyntaxHighlighter:クリックします

②SyntaxHighlighterのバージョン:選択します(バージョン3がお勧め)

バージョン3
コードが長い場合、折り返さずにスクロールバーが表示されます
コードをダブルクリックするだけで全選択できるのでコードのコピーが楽です

バージョン2
コードが長い場合、折り返して表示されます
コードのコピーなどはツールボックスから操作します

③テーマ:好みのテーマを選択します

Default
Default
Django
Django
Eclipse
Eclipse
Emacs
Emacs
Fade to Grey
Fade to Grey
Midnight
Midnight
RDark
RDark
Non
Non

④すべてのブラシを読み込む:チェックはオフで良いです

<pre>タグを使用しコードをそのまま表示する場合にチェックしますが、[[CSS]]、[[PHP]]など殆どのショートコードが用意されているので、<pre>タグを使用することは無いです

⑤規定の設定:必要により、好みで設定します

⑥「設定を保存」ボタン:クリックします

SyntaxHighlighter Evolvedの使い方

SyntaxHighlighter Evolvedは、以下の言語に対応しています。
使い方は簡単、[[強調したい言語]]...[[/強調したい言語]]のようにショートコードが使用できます。

対応言語

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
xml

 
使い方

入力例


表示例

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://hogehoge.com/thanks/'; //サンクスページのURL
}, false );
</script>

 

以上、【WordPress】ソースコードを綺麗に表示するSyntaxHighlighter Evolvedプラグインの導入方法でした。

スポンサーリンク
おすすめの記事