Bootstrapのサイトみたいにソースコードを表示するようにしたこのブログではソースコードを書く記事は書かない予定でした。Typeのことであったり、CakePHPなどWeb系の技術的なことも書くことにしました。すると、そのような記事を書く場合、大体ソースコードを記事中に書くことになります。Bootstrapのサイトのように綺麗に表示することにしました。Bootstrapのサイトではgoogle-code-prettifyが使われている模様。いうわけで、同じようにgoogle-code-prettifyを使うことにしました。今回はWordPressに設置したので、その手順と使い方をメモしておきます。google-code-prettifyとはウェブページでソースコードを色付けするJavaScriptライブラリ。google-code-prettifygoogle-code-prettifyの入手google-code-prettify一式をダウンロードします。sourcesの方で。google-code-prettifyのアプロードダウンロードしたファイルを解凍し、google-code-prettifyフォルダをサーバにアップロードします。その他のファイルたくさんアップロード先は各自お好きな場所に。先ほどアップロードしたファイルをテンプレートファイルで読み込みます。media="all"><head>内に追加します。?>/google-code-prettify/prettify.js"></script><script>prettyPrint();</script>を</body>タグの直前に追加します。ファイルまでのパスはアップロード先により異なります。BootstrapのCSSを拝借あとはソースコードをクラス名.prettyprintを付けた<pre>タグで囲って書けば綺麗に表示されます。Bootstrapのサイトでは綺麗に表示されています。#fff;}というわけで、prettify.cssを上記コードに修正。無事、綺麗に表示されるようになりました。最後はちょっと力技でしたが、これでブログ記事にソースコードを書いたときに綺麗に表示できるようになりました。スポンサードリンクTwitterFacebookGoogle+Pocketこちらの記事はいかがでしょうか?スポンサードリンク大輔べについて「大輔ベ」は、高尾山の麓でサイト制作(フリーランス)をしながら暮らしている「たしろだいすけ」のブログです。登山や旅行、写真撮影、グルメ、たまにサイト制作に関することなどを書いています。daisukebe.net。