フリーCGIスクリプト配布サイト。
[WDP] プログラムコードを貼り付けたい。
名前 ... kaer
Ｅメール ...
設置URL ... http://lightz.info/index.cgi?no=28&continue=on
WDP素晴らしいです、便利に使用させて頂いております。
お手数ですが１点質問させてください。
(二重投稿になったかもしれません。。)
◆質問
プログラムのソースコードをWDPの記事に貼り付けたいのですが、
[ >| ～ |< ] 以外の方法で、Pタグによるマークアップ、
BRタグの挿入、その他GCIによる整形を止めることはできますか？
CGIの非公式改造はできれば避けたいです。
◆質問の背景
プログラムコード(C言語など)をWDPの記事に貼り付けたく、
更に行番号を表示してキーワードを装飾したいと思っており、
以下のようなツールを作成して機能を実現しています。
http://lightz.info/index.cgi?no=28&continue=on
ここで以下のような問題が出てしまいました。
◆問題
ツールで生成した整形コードを[ >| ～ |< ] タグで囲っています。
この生成した整形コード内でOLタグを使用しているため、
Another HTML-lintに怒られてしまいます。
※警告：<ol> を xx行目の <pre>?</pre> 内に書くことはできません。
[ >|| ～ ||< ] タグ(PRE,CODE)ですと、HTMLタグ自体無効になるため調子が悪いです。
お手数ですがよろしくお願いいたします。
投稿日時 ... 2010年06月21日(Mon)14時20分 ... (No.6318)
Re: [WDP] プログラムコードを貼り付けたい。
名前 ... Kazuki Ashiya
Ｅメール ... kazuki-ashiya@mail.goo.ne.jp
設置URL ... http://hanakimi-ikepara.hotcom-web.com
そうですねえ…codeタグを使用するのであれば自動的に等幅フォントに切り替わるものですから、preが要らないんじゃないでしょうか。
ソースコードのハイライトであればGeneric Syntax Highlighterを使用して出力を参考にするのも手でしょう。
投稿日時 ... 2010年06月22日(Tue)20時28分 ... (No.6320)
Re: [WDP] プログラムコードを貼り付けたい。
名前 ... kaer
Ｅメール ...
設置URL ... http://lightz.info/index.cgi?no=28&continue=on
Kazuki Ashiyaさま
ご回答ありがとうございます。
＞codeタグを使用するのであれば自動的に等幅フォントに切り替わるものですから、
＞preが要らないんじゃないでしょうか。
確かにその通りかもしれません。
ただ、WDPの記事上でcodeタグ(preも)の直打ちは不可と認識しております。
理由は、WDPによりp, brタグ等の整形が入るためです。
正確に言うと打てることは打てますが、グチャグチャになります。
brタグはオプションで消せますが、これは本来の意図ではありません。
ですので現状、WDPの >| ～ |< (preタグに相当)を使用しています。
これによって整形が入らなくなるようです。
また、codeに相当するWDPのタグは無いと認識しております。
pre,codeのコンボはあるようです。→ >|| ～ ||<
以下ページを参考にさせて頂き、Syntax Higlighter検討してみました。
http://weblog.atl-r.net/blog/syntaxhighlighter/
結果、アプローチとして参考になりましたが、
WDPの整形を止める、という問題は解決できなそうに思えました。
申し訳ありませんが勘違い等あるかもしれません。
このジャンルに関しては素人のためご容赦ください。
お手数ですがよろしくお願いいたします。
投稿日時 ... 2010年06月23日(Wed)11時59分 ... (No.6323)
Re: [WDP] プログラムコードを貼り付けたい。
名前 ... Kazuki Ashiya
Ｅメール ... kazuki-ashiya@mail.goo.ne.jp
設置URL ... http://hanakimi-ikepara.hotcom-web.com
なるほど…
行番号挿入のためにはolは欠かせない、と。
ただ、olを使用するのであれば、codeがインライン要素となりますので、ol>liの内部にcodeを組み込む必要があります。
インライン要素・ブロック要素の詳細は以下でご確認ください。
http://www.tohoho-web.com/html/memo/elmtree.htm
当方でHTMLをコピー・操作してATLで確認したところ、やはり100点をとるためにはpreをなくすことは欠かせないと思われます。
当方でもWDPを使用していますが、「改行を変換する」チェックを外せば<code>タグを問題なく使用することができましたので一度お試しください。
まとめますと、
・preをなくす
・改行を変換するチェックをオフに
・ol→li内にcodeを動かす
となります。
いかがでしょうか。
投稿日時 ... 2010年06月24日(Thu)17時23分 ... (No.6324)
Re: [WDP] プログラムコードを貼り付けたい。
名前 ... kaer
Ｅメール ...
設置URL ... http://lightz.info/index.cgi?no=28&continue=on
Kazuki Ashiyaさま
回答ありがとうございます。
まとめて頂いた情報を元に、検討してみます。
数日後に結果報告いたします。
ありがとうございました。
投稿日時 ... 2010年06月26日(Sat)20時29分 ... (No.6326)
Re: [WDP] プログラムコードを貼り付けたい。
名前 ... kaer
Ｅメール ...
設置URL ... http://lightz.info/index.cgi?no=28&continue=on
お世話になります。
結局のところ、WDPを改造することになりました。
理由は、WDPのデフォルトスタイルシートへの対応が難しいためと、
改行オプションはそのまま使用したいためです。
確かに改行のチェックを外す事で一見きれいに出力されるのですが、
Pタグが挿入されることによってハイライトのスタイルシート適用が難しくなってしまいました。
(できないことはないのですが、かなりゴリゴリした対応になります)
というわけで、勝手ながら以下の改造を施して使用させていただいています。
http://lightz.info/index.cgi?no=33&continue=on
(Perl経験はほぼ皆無故、直感での対応ですが..)
一応目的のものができましたので、ここまででCloseとさせていただきます。
Kazuki Ashiyaさま、ありがとうございました。
投稿日時 ... 2010年07月06日(Tue)02時50分 ... (No.6339)