WordPlessのプラグイン(SyntaxHighlighter Evolved)を使ってソースコードを記事内に表示する方法

「記事の中にソースコードを表示させたい。」
ということはよくありますよね。
しかし当然ながら、そのままソースを書いてもコードは表示されません。
そんなときに便利なのが、WordPressのプラグイン「SyntaxHighlighter Evolved」を使った方法です。

「SyntaxHighlighter Evolved」を使う

「SyntaxHighlighter Evolved」を使うと、以下のような表示ができるようになります。

「SyntaxHighlighter Evolved」を使った表示例

<strong>記事の中にソースコードを表示させたい</strong>とき。
当然ながら、そのままソースを書いてもコードは表示されません。
そんなときに便利なのが、WordPressのプラグイン「SyntaxHighlighter Evolved」を使った方法です。

この様に色付けがされてわかりやすく、スクロールもすることができます。
では次から実際の使い方を記載していきます。

「SyntaxHighlighter Evolved」をインストール

まずは「WordPressの管理画面」「プラグイン」「新規追加」
「SyntaxHighlighter Evolved」を検索します。

検索結果にでてきた「SyntaxHighlighter Evolved」をインストール「有効化」します。
これで「SyntaxHighlighter Evolved」のインストールと有効化が完了しました。
つまりこれだけでもう使えるようになったのです。

インストールした「SyntaxHighlighter Evolved」を使ってみる

WordPressの記事を投稿する画面から、記述を「ビジュアル」ではなく「テキスト」の状態にして使います。
あとは簡単で、半角の[]の中に言語名(xhtmlやcss、php等)を記入し、表示したいソースを書き、最後に[/]で閉じるだけです。

[ここに言語名]
ソースを書きます
ソースを書きます
ソースを書きます
[/言語名]

このような感じです。

まとめ

基本的にはこれだけで使用できるので、今回はここまでにします。
少し細かい使い方は、以下inoshさんのブログにてわかりやすく解説されていたので、参考にしてみてください。

inosh blog

https://inosh.jp/syntaxhighlighter-evolved/