WordPressにソースコードを表示させる
最近コーディングのメモとしてもブログを活用しているので、現在使用しているWordPressでソースコードを表示させる方法がないか調べてみました。
どうやらWordPressのプラグインを使用すれば簡単にソースコードを表示させることができるようです。
ここでは『SyntaxHighlighter Evolved』プラグインを使用し、WordPressでソースコードを表示させる方法を紹介します。
『SyntaxHighlighter Evolved』のインストール
WordPress管理画面 → プラグイン → 新規追加 → 『SyntaxHighlighter Evolved』と入力
上記画像の『SyntaxHighlighter Evolved』をインストールし、有効化にします。
『SyntaxHighlighter Evolved』の設定を行う
管理画面の左メニューの「設定」の中に新たに「SyntaxHighlighter」というのが追加されているのでそちらをクリック。
SyntaxHighlighterのバージョン
・バージョン3：訪問者が簡単にマウスを使用して（ドラッグかダブルクリック）、コードの部分を強調表示し、クリップボードにへコピー可。Flashベースボタンを含むツールバーが不要です。
・バージョン2：行の折り返しが可能。バージョン3ではサポートされません。
テーマ
幾つかテーマが用意されています。
テーマを選び、「変更を保存」を押すと下にあるプレビューでどのようなデザインになったのか確認することができます。
他の設定で余白やclassの追加などもできるようです。
設定を変更せずとも使えそうなのでここではそのまま使ってみます。
『SyntaxHighlighter Evolved』を実際に使ってみる
実際に『SyntaxHighlighter Evolved』を使っていきます。
WordPress管理画面→「投稿」 → 新規追加で新規記事を作成します。
そこでソースコードを表示させたいところにこのように記載するようです。
他にも様々な言語に対応しているようです。
brushes一覧はこちら
『SyntaxHighlighter Evolved』プラグインを使ってブログにソ－スコードを表示させてみてください！
