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]
スポンサーリンク