*

[CakePHP]SyntaxHighlighterを利用する

公開日: : CakePHP

ソースを綺麗に表示する

このサイトでも利用しているのですが、ソースを表示して、かつ予約語などを別色にしたり、行番号を出力したい、というときに、SyntaxHighlighterというものを使っています。
具体的にはこんな感じ。

int main(void){
    printf("Hello World!!");
}

今回はそれをCakePHPで利用できるようにしてみたときの備忘録です。

準備

必要なものとしてはSyntaxHighlighter本体です。
こちらのSyntaxHighlighter配布元でダウンロードします。

右側のDownloadからダウンロードしてください。
Wannabenote

配置

ダウンロードをすると、
compass,scripts,src,styles,testsなどのフォルダがあります。
Wannabenote

今回必要なのはこの中でscriptsとstylesのみになります。

これらをわかりやすいフォルダ名に変えて、CakePHPのwebroot/cssとwebroot/jsに保管します。
scriptsの内容はwebroot/jsに。stylesの内容はwebroot/cssに保存します。
ちなみに私はこんな感じで配置しました。
CakePHP SyntaxHighlighter

以後、webroot/css/syntaxhighlighterとwebroot/js/syntaxhighlighterにスクリプトなどを保存したものとして進めます。

利用してみる

準備は以上で終わりですので、使ってみます。

viewファイルで以下を記述します。

<pre class="brush: c-sharp;">
int main(void){
    printf("Hello World!!");
}
</pre>

<?php echo $this->Html->script(array('syntaxhighlighter/scripts/shCore.js')); ?>
<?php echo $this->Html->script(array('syntaxhighlighter/scripts/shAutoloader.js')); ?>

<?php echo $this->Html->script(array('syntaxhighlighter/scripts/shBrushCSharp.js')); ?>

<?php echo $this->Html->css(array('syntaxhighlighter/styles/shCoreEclipse.css')); ?>

<script>
$(function () {
    SyntaxHighlighter.all();
});
</script>

結果

syntaxhighlighter
こんな感じでExlipse風にハイライトされました。

9行目でC#をハイライトするためのjavascriptを呼び出しています。
もちろん必要であればPerlやRubyなどのjavascriptを読み込んでおくことで、PerlやRubyのソースに対してもハイライトすることが出来ます。
また11行目でどのようなスタイルにするかのスクリプトを呼んでいます。
こちらのスクリプトを他のものに変更すれば、Emacs風などにも変更できます。
もちろん、元のcssを利用して新たなcssを作れば、自分好みのスタイルに出来るかと思います。

ハイライト実行箇所の指定

ハイライト可能な対象はpreタグとscriptタグで囲む方法があります。
今回はpreタグを使っています。

<pre class="brush: c-sharp;">

このように指定することで、preタグで囲まれた部分をC#でハイライトするように指定しています。
あくまで指定のみなので、これだけではハイライトされません。

ハイライト実行

<script>
$(function () {
    SyntaxHighlighter.all();
});
</script>

SyntaxHighlighter.all()というメソッドでハイライトを実施しています。

ライセンス

2015/1/6現在ではSyntaxHighlighterはGPLとMITのデュアルライセンスの模様です。
利用する際にはお気をつけください。

ちなみに結局ライセンス関係で私は利用するのを却下しました。

ad

関連記事

logo

[CakePHP]bakeコマンドでControllerを作る

CakePHP関連まとめページはこちら。 今度はControllerをbakeコマンドで焼き上げて

記事を読む

logo

[CakePHP]bakeコマンドでControllerを対話形式で焼き上げる

基本の三種は焼きあがったのだけど 焼きあがったんですが、Controllerのソースがscaffo

記事を読む

Wannabenote

[PHPStorm]SNSを作ろう IDE環境作成編

SNSを作ろうまとめページはこちら。 前回の続き、というか閑話休題。 プログラムをガチで

記事を読む

Wannabenote

[CakePHP]SNSを作ろう CakePHP設定編

SNSを作ろうまとめページはこちら 前回の続き。 前回のこの画面は設定が必要な箇所を示し

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編3~投稿画面作成~

SNSを作ろうまとめページはこちら→SNSを作ろうまとめページ 前回(SNSを作ろう ブログ編

記事を読む

Wannabenote

[CakePHP]SNSを作ろう CakePHPインストール編

SNSを作ろうまとめページはこちら はい。こないだのsymfonyはなかったことにします。

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編

SNSを作ろうまとめページはこちら。 前回の続き。 さて、私が今作りたいのはブログがメイ

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編4~閲覧画面作成~

SNSを作ろうまとめページはこちら→SNSを作ろうまとめページ SNSを作ろう ブログ編3~投

記事を読む

Wannabenote

[CakePHP]SNSを作ろう ブログ編5~編集画面作成~

SNSを作ろうまとめページはこちら CakePHPで閲覧画面を作った続きです。 投稿を手軽に

記事を読む

Wannabenote

[CakePHP]ログアウトすると権限が必要と表示される

ちょっと時間は前後しますが、ログイン機能を作ったあとの話です。 チュートリアル通りに進めても、

記事を読む

ad

Message

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

ad

  •  Auther;わなび

     「オープン系得意だよね? 俺のPCの調子悪いんだけど」という無茶振りから解き放たれゲームエンジニアに。
    C#とかUnityを扱います。
    Twitterフォロー大歓迎です。
    githubアカウント→wannabenote
  • follow us in feedly
PAGE TOP ↑