ブログ記事内にコードを表示出来るプラグイン『SyntaxHighlighter Evolved』が超便利!!使い方は簡単なの!?【実践レポート記事】

公開日： 2015/01/19 : 最終更新日：2015/01/21 stinger3カスタマイズ, WordPress系 WordPress コード表示プラグイン

どうもです、いろはすです。

stinger3のカスタマイズにあたって、色々とプラグインを見ているのですが、世の中には便利なプラグインがたくさんありますな！

では早速見て行きましょう～！

コードをブログ記事内で表示出来るプラグイン！

色々と表示方法があるのですが、ワードプレスブログの場合は便利な『SyntaxHighlighter Evolved』というプラグインがあるので、それを利用しちゃいましょう！

表示させるまでの手順！

①ワードプレスの管理画面から『SyntaxHighlighter Evolved』で検索して、インストール
②プラグインをインストールしたら、有効化！
③設定画面から⇒SyntaxHighlighterを選択！

④するとこんな画面が出てくるので、「ツールバーを表示する」にチェックを入れておきましょう！

バージョンは「2」と「3」がありますが、コードを記事中に表示させるだけなので、2で問題ないかと！

その他の項目は特にイジる必要はないんじゃないかと！個人的には「ツールバー」の表示ボタンもいらないと思うので、僕はチェックを外していますｗ

で、どうやって記事中で使うんだい！？

使い方はシンプルで、表示させたいコードの最初と終わりを[言語名][/言語名]というショートコードで囲うだけ！

今回はcssコードを表示させたいので、と書く感じですね！

後は勝手にプラグインが、囲ったソース全部をキレイに整えて表示してくれます！こんな感じ！

/*サイドの各タイトル見出し*/
.menu_underh2 {
	margin-bottom: 20px;
	margin-top: 20px;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 35px;
	background-image: url(images/ca3.png);
	background-repeat: no-repeat;
	background-position: left center;
}

以上！！いやホントにコレだけでOKなんですよｗ　

色付けも自動でやってくれるので見栄えがイイですね～！
こういうのは地味に大事ですｗ

参考ブログはコチラ！
⇒ホームページ制作サカエンさんのSyntaxHighlighter Evolved を使ってみる – WordPress plugin

恐らくこのプラグインを使ってるっぽいブロガーさんも多いので、ソースコードを記事中に表示させてたい場合は使ってみてくださいな～！

良いものはドンドン使っていくのがイイですよね！

それでは～

いろはす

プラグインもあまり入れ過ぎると重くなるみたいですが、優良なプラグインは入れておきたいですよね！