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

ブログにソースコードを貼り付ける方法として、以前、GitHub/Gistを使った方法を紹介しました。

しかし、Gistにアップしたソースを掲載する方法なので、作成途中のソースコードや悪い例などを表示するには不向きです。Gist上で未完成のソースを公開することになるので。

なので、未完成ソースやサクッと1行だけ紹介するようなケースではブログに直接書いた方がいいのですが、WordPressって空白を自動で消したり、結構行く手を阻んでくれるんです。何か良い方法ないかなと思っていたところ、なんとWordPressのプラグインにSyntaxHighlighterがあるではないですか。

ブログをWordPressで書いていてよかったと思うのは、こんな風に豊富なプラグインに助けられた時ですね。

[ad#top-1]

まずはプラグインをインストール

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

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

 

「設定」メニューの中に「SyntaxHighlighter」が表示されるようになればインストール成功です。

 

設定

「設定」メニューの「SyntaxHighlighter」を選択すると以下のような画面になります。いろいろ設定できるようですが、僕はとりあえず何もせずデフォルトのままにしました。

 

ツールバーを使う場合は、バージョンの選択を変える必要があるみたいですが、ボク的には必要なかったので特に試していません。

 

使ってみる

使い方は非常に簡単です。なんとビジュアルエディタ上で書けます。

例えばCSSだったら、ソースコードを

［css］~［/css］

の中に書きます。

 

ビジュアルエディタ上では確認できませんが、実際に公開すると以下のようになります。WordPressではプレビューモードでも確認できます。

前回、「CSSでLINEみたいな吹き出しを作るには」の際にこのSyntaxHighlighter Evolvedを利用しました。途中経過のソースを掲載しながら説明したかったので、非常に助かりました。この点、やはりプラグインが豊富なWordPressで良かったと思いました。

[ad#ad-1]

 - WordPress