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

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

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

//こんな感じに表示されるようになります。
foreach ( $value as $arr ){
  echo $value ;
}

 

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

 

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

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

 

[当サイトの構成(2012/11/5現在)]

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

 

手順

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

     

  5. 次にbodyタグに"onload="prettyPrint()"を追加します。
    sites/all/themes/danland/html.tpl.phpを開き、onloadを追加して下さい。

     

Ckeditorのカスタマイズ

 

  1. 次にWysiwygエディターをカスタマイズし「Google code」を選択すると、先ほど追加したpreタグとclassが挿入されるようにします。
    ※ckeditorのカスタマイズを行います。

     
  2. 今回はスタイルと言うブロックのプルダウンを選択したときに「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
     
  3. 「CKEDITOR.stylesSet.add」に以下のソースを追加します。
     
  4. {
      name:'Google code',
      element:'pre' ,
      attributes : { 'class' : 'prettyprint linenums' }
    }

     

  5. あとはキャッシュをブラウザとDrupalのキャッシュをクリアし、再度エディターを起動すると「Google code」が追加されます。
     

 

関連記事

CKEditor for Drupalドキュメント(外部サイト)

CKEditor for Joomla (外部サイト)

CMSを使うと誰でも簡単にカッコイイサイト更新ができるのか??

DrupalのCKEditorにテンプレート挿入機能を追加

CKEditorにカスタムボタン(Plugin)を追加する

 

 

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。