ワードプレスでソースコードを掲載する方法-SyntaxHighlighter Evolved編

サイトの制作中に調べたプラグインや
カスタム方法をメモ帳としてここに記載しておきます。


同じようなカスタムに
つまずいた人の役に立てればうれしいです。


ワードプレスを記事中によく
サンプルコードを記載してくれてるサイトを目にする
自力でもcssで作成できるけど、
なるべく更新の手間をなくしたいという事で
SyntaxHighlighter Evolved使って見る事に。


その前に「WP-Syntax」を使ってみたけど、


今私の使ってるワードプレスの
バージョンに最適化できてなかったので、
「SyntaxHighlighter Evolved」を採用。


(※2012年9月21日時点、ワードプレス3.4.2)


使用したプラグイン名:SyntaxHighlighter Evolved


表示例

#content {
  margin:10px;
   width:960px;
   }

こんな感じの表記ができてしまうプラグインです。


SyntaxHighlighter Evolvedの設置方法



1.ワードプレス管理画面からプラグイン→新規追加を選択。
2.「SyntaxHighlighter Evolved」を検索→「今すぐにインストール」→「プラグインを有効化」これで設置は完了です。


設置も使い方も簡単なので
これならHTMLとか・・・って方でも十分使えそう。


SyntaxHighlighter Evolvedの使い方



使い方はとてもシンプルで、
投稿画面のソースコードを記載したいところに
下記のコードを入れるだけです。


cssの場合:&#91css&#93ソースコード&#91/css&#93
PHPの場合:&#91php&#93ソースコード&#91/php&#93
HTMLの場合:&#91html&#93ソースコード&#91/html&#93


これで表示完了です。


対応コード


html,actionscript3,bash,coldfusion,cpp,csharp,css,delphi,erlang,fsharp,diff,
groovy,javascript,java,javafx,matlab (keywords only),objc,perl,php,text,
powershell,python,r,ruby,scala,sql,vb,xml


Copyright(c) 2013 MNT All Rights Reserved.