WordPressでの投稿にソースコードを入れる私

やはりエンジニアとしては今後ソースコードを紹介するような局面に出くわすであろうと思い、色んな先輩方のブログに組み込まれているSyntaxHighlighter EvolvedをMyWordPressにもぶち込みました。

入れてみて思ったのですが、何よりも驚いたのはその導入のし易さでした。。このプラグイン、本投稿を実験材料に早速試してみたいと思います。

ちなみに組み込み方は以下になります。

「プラグイン」⇒「新規追加」⇒ 検索BOXで ”SyntaxHighlighter Evolved” と検索します。
おそらく一番上の方にバージョンの新しいSyntaxHighlighter Evolvedが表示されるので、
「いますぐインストール」⇒「有効化」
終了

こんなにあっさり入るのかい。
楽しいですね!

なお、デフォルトで以下のメジャーな言語には対応しており、追加したければ自分で追加も可能のようです。

html, css ,actionscript3 , bash , C++ , javascript , java, Objectiv-C, php, phthon , ruby , SQL ,,,,

自分で追加したい場合はこちらのブログに方法がかかれております。 んー 先輩方すごい。

というわけで、早速ソースを書いて試してみたいと思います。
やり方は [言語名] ソース [/言語名] との事。。 簡単すぎる。

</pre>
<div id="test"><a href="altarf.net">テスト用ソースでやんす</a></div>
<pre>

と、一応動いているんですが、最初動きませんでしたwwwww
どうも、/body の直前に以下関数を入れないといかんようです。

<?php wp_footer(); ?>
</body>

</body>の直前でなくとも、body内であればOKなようす。
こちらのブログでご教示いただきました。 ありがたいことです。

なお、ソースコードの開始番号を指定するとか、指定の行にハイライトを当てたりもできるそうです。
超便利ですね。

動作確認が終わりましたので、最後にcssだけ当てておきます。 デフォルトだとboderとかがないので、白地の私のブログの場合不快感MAXでした。
ソースコードの表示部分は div タグで、class=”syntaxhighlighter xml” を自動で付与してくれるので適当に好みなborderとかをcssに書いて完了です。 このブログではとりあえず以下cssを書いておきました。


div.syntaxhighlighter{
border: solid 1px #a9a9a9;
}

というわけで、今度からrubyとかJavaとかのソースコードを書くようなブログにもチャレンジしていきたいと思います。
おわり。

2012-07-23 | Posted in Word PressNo Comments » 


関連記事

Comment





Comment



*