Home > ライフハック > ソースの貼り付け方法その後

ソースの貼り付け方法その後

2006-09-07 (Thu) 15:40
ライフハック

昨日書いた「ブログにコードを貼り付ける方法で悩むの巻」ですが、さまざまな方のブログでとりあげていただき、とんでもなく勉強になっています。

ためになるのでこちらでもご紹介。

pre要素へのスタイル指定

いやぁ、よくわからないで書いていたのでところどころ間抜けな記述がありましたが（ガチで「実態参照」と思っていたよ・・・）書いてよかった。とっても勉強になりました。

いろいろな論点がありそうですが、個人的にはpreとcodeのあわせ技で行こうかな、と。あとは実体参照はエディターのマクロの勉強も兼ねて作ってみようかな、と思いました。

ちなみに実体参照はみなさんやっぱり手作業なのですね・・・そう考えるとMTのPlug-inであっていいような・・・はてなの記法が優れているということもわかって勉強になりました。

ちなみに昔から気になっているのはブログじゃないのですが、Yahoo! Developers Networkのコードの記述方法。

↑ なんだか高機能。

普通のソースコードにあわせて「view plain」「print」「copy to clipboard」などがあってとっても使い勝手が良いのです。クリップボードへのコピーはIEのみ対応なのでFirefoxでは表示されないという念の入れよう。

↑ 拡大してみる。

しかもソースコードの関数を見てちゃんと色分けもしている模様。ここらへんはJavascriptで実現しているようですね・・・。

こちらのソースは、以下のようになっていますね。preとtextareaのあわせ技です。

<pre><textarea name="code" class="JScript" cols="60" rows="1">
// Creates a namespace for "myproduct1"
YAHOO.namespace ("myproduct1");
YAHOO.myproduct1.Class1 = function(info) {
alert(info);
};
// Creates a namespace for "myproduct2", and for "mysubproject1"
YAHOO.namespace ("myproduct2.mysubproject1");
YAHOO.myproduct2.mysubproject1.Class1 = function(info) {
alert(info);
};
</textarea></pre>

しかしソースはこれですが、なんだかJavascriptでごりごりしてすごい具合にレンダリングしている模様（調べたけど頭が混乱したｗ。あきやんに聞いてちょっとわかったけど）。

ソースは見やすいのも大事ですが、コピペしたり、印刷したりするのも大事ですよね。ちょっと手がこんでいますが、Yahoo!のやりかたはいいかな、と思いました。こういうのライブラリ化するといいかもですね、Yahoo!にあるかもしれないけど。

というわけで続報でした・・・。

こちらもあわせてどうぞ

Twitterもやっています！

Posted on September 7th, 2006

Comments:5

から 06-09-07 (Thu) 18:27

丁度私も同じこと調べてました。
で、以下のようなサイトを見つけました。

http://jmblog.jp/archives/80

OperaもIEも対応してて良い感じです。

caol_ila 06-09-07 (Thu) 19:13

Yahoo!で使っているのはこれかもしれないですね。
http://www.dreamprojections.com/SyntaxHighlighter/Default.aspx

ヒビノアワ 06-09-08 (Fri) 11:49

実体参照変換ツール

i d e a * i d e a – ソースの貼り付け方法その後ちなみに実体…

Anonymous 06-09-09 (Sat) 2:45

でも一番便利なのはソースファイル自体にリンク貼ってくれることですね。text/plainあたりで。

yuki 06-09-13 (Wed) 8:43

PHPならphpspotのPHPコード変換

http://phpspot.net/php/codeconv/

なんてものもあります、既出かもしれませんが。

Trackbacks:0

Trackback URL for this entry: http://www.ideaxidea.com/archives/2006/09/post_130.html/trackback
Listed below are links to weblogs that reference: ソースの貼り付け方法その後 from IDEA*IDEA ～百式管理人のライフハックブログ

Home > ライフハック > ソースの貼り付け方法その後