WordPressにソースコードを表示させる方法

WordPressにソースコードを表示させる

最近コーディングのメモとしてもブログを活用しているので、現在使用しているWordPressでソースコードを表示させる方法がないか調べてみました。
どうやらWordPressのプラグインを使用すれば簡単にソースコードを表示させることができるようです。
ここでは『SyntaxHighlighter Evolved』プラグインを使用し、WordPressでソースコードを表示させる方法を紹介します。

『SyntaxHighlighter Evolved』のインストール

WordPress管理画面 → プラグイン → 新規追加 → 『SyntaxHighlighter Evolved』と入力

上記画像の『SyntaxHighlighter Evolved』をインストールし、有効化にします。

『SyntaxHighlighter Evolved』の設定を行う

管理画面の左メニューの「設定」の中に新たに「SyntaxHighlighter」というのが追加されているのでそちらをクリック。

SyntaxHighlighter

SyntaxHighlighterのバージョン

・バージョン3:訪問者が簡単にマウスを使用して(ドラッグかダブルクリック)、コードの部分を強調表示し、クリップボードにへコピー可。Flashベースボタンを含むツールバーが不要です。
・バージョン2:行の折り返しが可能。バージョン3ではサポートされません。

テーマ

幾つかテーマが用意されています。
テーマを選び、「変更を保存」を押すと下にあるプレビューでどのようなデザインになったのか確認することができます。

例:Django
SyntaxHighlighter

他の設定で余白やclassの追加などもできるようです。
設定を変更せずとも使えそうなのでここではそのまま使ってみます。

『SyntaxHighlighter Evolved』を実際に使ってみる

実際に『SyntaxHighlighter Evolved』を使っていきます。
WordPress管理画面→「投稿」 → 新規追加で新規記事を作成します。
そこでソースコードを表示させたいところにこのように記載するようです。

SyntaxHighlighter

他にも様々な言語に対応しているようです。
brushes一覧はこちら

試しにCSSのソースを表示させてみました。

a {
color: red;
font-size: 12px;
}

うまく表示できました。

『SyntaxHighlighter Evolved』プラグインを使ってブログにソ-スコードを表示させてみてください!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

トップへ戻る