ZeRoさん提供のスニペット版GeSHi
ZeRoさんとtkfmさんに感謝しながら説明♪
前ページでこのサイトで使うことを諦めたGeSHiなんだけども、MODx日本語フォーラムでGeSHiに関する相談に乗ってくれていたZeRoさんがスニペット版のGeSHiを作ってくれた♪
最終的にはtkfmさんも加わり、希望通りの動作をしてくれるようになりました(オレはなんにもしてないんだが。。。。汗)
このお二人に感謝しながら説明していきまっす♪
プラグイン版のGeSHiは必須です
このスニペット版GeSHi、コアはプラグイン版のGeSHiを使っているということで、プラグイン版のGeSHiはインストールされてる必要がある。
GeSHiダウンロードページ(別窓)
GeSHiのインストールについては、ここでぐだぐだ説明するより上手に説明してくれてるサイトがあるんでそちらをどうぞwww
DAICHIFIVE / 【MODx】記事内のコード表示が楽になる「GeSHi Syntax Highlighter(別窓)
で、めでたくプラグイン版GeSHiがインストールできたとこで、
リソース→リソース管理→プラグイン→GeSHi を開いてプラグインを中止させる。
コアのみを利用するんで、プラグインソースはいらないらしぃ。。。
じゃぁはじめから作らなくてもいいのかな? ダメかな? これはもぅインストールしてあるこのサイトでは試せないのでどなたか試してみてくださいなwww
スニペット作成
さてここでスニペット版GeSHiを導入していくんだけども。。。。
ソースを公開していいかどうかいまいち不安なんで、リンク張っときますwww
ここのReply #21 tkfmさんの投稿にあるgeshi.snippets_tkfm.php.txtをDLしてください。
管理画面でリソース→リソース管理→スニペット→スニペット作成 をクリックして、DLしたコードをコピペします。
スニペットの名前は、たぶんなんでもいい。。。のかな?w
でもまぁ、『GeSHi』 にしとくのが無難でしょうw
これで導入完了♪ のはずwww
使ってみましょ♪
使うときは、まずチャンクで表示したいコードを作ります。
チャンク名は任意ですが、オレはあとあとの管理も考えて『CODE』って名前のカテゴリを作り、そこにcode001、code002.........って感じでナンバリングしたチャンクを作っていくことにしました。内容は説明文で表示すればいいし、スニペットコール書く時に楽かなと。。。
まぁ、ここは任意なんで、管理しやすいようにテキトーに考えてくださいw(ﾅｹﾞﾔﾘｷﾀｺﾚwww
例えばこんなコードを『code001』に記述します。
<li>
<a href="[+maxigallery.childurl+]">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.strings.go_to_gallery+]" alt="[+maxigallery.strings.go_to_gallery+]">
</a><br>
[+maxigallery.pageinfo.pagetitle:htmlent+]
</li>
で、スニペット版GeSHiで呼び出してみましょう。
スニペット版GeSHiのコールはカンタン♪
[[GeSHi? &c=`コードを記述したチャンク名` &l=`php`]]
パラメータcはこの場合チャンクを使ってますが、TV(テンプレート変数)を作ってそこにコードを書き、&c=`TV名` でもいいそうです。オレはチャンクの方が管理しやすいと判断したんでチャンクにしたけどね。。。そこはご自由にどぞ♪
で、パラメータlですが、もともとのプラグイン版GeSHiでいろんな言語のコードが書けるようになってるみたいで、ここでその言語を指定します。
ただ、htmlタグを表示したい時に、&l=`html4strict`と指定すると、なぜかhtmlタグに意味不明なリンクが張られ、クリックするとどっかのコード説明のページに飛びます。。。。よく意味わかんなかったんで。。。htmlタグが入ってる時もphpでいいかも???www
■例 &l=`html4strict`の場合
<li> <a href="[+maxigallery.childurl+]"> <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.strings.go_to_gallery+]" alt="[+maxigallery.strings.go_to_gallery+]" /> </a><br /> [+maxigallery.pageinfo.pagetitle:htmlent+] </li>
■例 &l=`php`の場合
<li> <a href="[+maxigallery.childurl+]"> <img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" title="[+maxigallery.strings.go_to_gallery+]" alt="[+maxigallery.strings.go_to_gallery+]" /> </a><br /> [+maxigallery.pageinfo.pagetitle:htmlent+] </li>
最後にcssでレイアウトを整える
コードを記述してくれるのはいいんだけど、ページのレイアウトを無視して改行してくれないんですよね。それで、吐き出されたhtmlソース覗くと、該当部分が
<pre class="php"> とか <pre class="html4strict"> になってるのがわかります。
つまり出力する言語の名前をclass名にしたcssで表示が制御されてるっぽいんで、レイアウトのcssに以下を追加してレイアウトを整えました。
.php { width: 375px; overflow:scroll; background-color:#64584A; height: auto; font-size: 12px; white-space: -moz-pre-wrap; /* Mozilla */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: pre-wrap; /* CSS3 */ word-wrap: break-word; /* IE 5.5+ */ margin-left: 20px; line-height: 200%; }
まぁ、出力する言語の数だけcssを追加する必要はありますけどね。。。。A;´･ω･)
ちなみにcssコードの中身で、white-space ～と書かれた4行は、コードを改行表示するためのものらしいです。長いコードを書く場合、改行したくない人と改行したい人がいると思いますが、改行したくない場合はこの4行を消してみてください。
ほんとは、テキストのサイズは100%で指定したかったんだけども、なぜかfirefoxでだけ文字が小さく表示されてしまうのでしかたなくピクセル指定にしてあります。
cssはね。。。まだまだ勉強中でよくわかってません。。。。。。A;´･ω･)
わかる人は教えて。。。。。(ﾉД｀)ｼｸｼｸ
コメント・ツッコミなんでもどぉぞ♪
コメントの投稿