google-code-prettifyでソースコードを見やすくする

今回紹介するのは「google-code-prettify」というライブラリーです。このブログを今まで読んで頂いて方は恐らく思っていたかと思うのですが、「プログラムのソースコードが見づらい！」と思っていましたよね？

そこで簡単にプログラムのソース色付けや行番号を表示するライブラリーの紹介です。

//未適用だと、こんな感じです。
foreach ( $calue as $arr ){
echo $value ;
}

今回の記事は「しゃけログ」を参考にさせて頂きました。しゃけログで「google-code-prettify」について細かく解説されていますので、是非そちらも参考にして下さい。

さて、今回は当ブログに適当を行いましたので、適用の手順を紹介致します。

CoreCMS：Drupal7.16
Theme：Danblog 7.x-1.0
エディター：Wysiwyg7.x-2.1、CKEditor3.6.5.7647

「Webサイトからお問い合わせが来ない…」とお悩みの方必見！
当サイトのノウハウを詰め込んだ『Web集客の無料ガイド』をご提供

手順

次のリンクより「http://code.google.com/p/google-code-prettify/downloads/list」ライブラリーをダウンロードします。
ダウンロードしたライブラリーを解凍し、prettify.jsと prettify.cssをサーバーにアップロードします。
今回は「sites/all/themes/danland/prettify.css」と「sites/all/themes/danland/scripts/prettify.js」にアップロードしました。
アップロードしたファイルを読み込むために.infoファイルを編集します。「danland.info」を開き、下記のコードを追加して下さい。
※違うテーマを使用している場合は、そのテーマにあった.infoファイルを編集下さい。
http://drupal.org/node/542202
1. stylesheets[all][] = prettify.css
2. scripts[] = scripts/prettify.js
次にbodyタグに"onload="prettyPrint()"を追加します。
sites/all/themes/danland/html.tpl.phpを開き、onloadを追加して下さい。

次にWysiwygエディターをカスタマイズし「Google code」を選択すると、先ほど追加したpreタグとclassが挿入されるようにします。
※ckeditorのカスタマイズを行います。
今回はスタイルと言うブロックのプルダウンを選択したときに「Google code」と言う項目を増やしますので、
ckeditorがインストールされている階層より「plugins/styles/styles/default.js」ファイルを開きます。
※今回は「sites/all/libraries/ckeditor/plugins/styles/styles/default.js」こちらのファイルを編集します。
※本来はmy_stylesを作って、そちらに追加するのが、元々のソースを弄らなくて良いのでお勧めです。
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles#Style_Rules
「CKEDITOR.stylesSet.add」に以下のソースを追加します。
1. {
2. name:'Google code',
3. element:'pre' ,
4. attributes : { 'class' : 'prettyprint linenums' }
5. }
あとはキャッシュをブラウザとDrupalのキャッシュをクリアし、再度エディターを起動すると「Google code」が追加されます。