2017年11月 / 10月≪ 123456789101112131415161718192021222324252627282930≫12月

インフォメーション

FC2ブログで画像等を一括アップロードするソフトを地味に配布してます。
FC2ブログ用ファイルアップロードの最新版はこちら
(ベクター)FC2ブログ用ファイルアップロード

--.--.-- (--)

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


 |  --:--  |  スポンサー広告  |  Top↑

2008.05.22 (Thu)

fc2blogで色分けしたソースコードを表示する

前々から困ってた「fc2ブログでのソースコードの色分け」がやっと解決しました。

fc2ブログでのソースコード色分けの問題点
「google-code-prettifyのようにjavascriptで動的に色分けしたいが、google-code-prettifyを使うとコピペ時に改行がなくなる」
をどうやって対処するか悩み、見つけた方法は

dp.SyntaxHighlighter」を使う。
↓ダウンロードはこちらから
http://code.google.com/p/syntaxhighlighter/downloads/list

スポンサーサイト


 |  18:15  |  プログラム全般  |  トラックバック(0)  |  コメント(0)  |  Top↑

2008.02.21 (Thu)

innerHTMLの罠

pre内の改行がなくなる問題について、どのタイミングでなくなるのかを調べてみました。

結果、エレメント.innerHTMLに値を入れたときに改行が半角スペースに変換され、
連続半角スペースが1つになります。
行頭の半角スペースは消えてなくなります。

[html]
pre1
<pre id="pre1">
for( int i = 0; i < 100; i++)
{
  if(i = 0) continue;
  n = n + i;
}
</pre>
<script language="JavaScript">
<!--
alert(document.getElementById("pre1").innerHTML);
-->
</script>

↓実行すると
up000000.jpg

まだちゃんと改行・半角スペースが入っています。

ところが、下記のようにinnerHTMLにそのままinnerHTMLを入れると

var pre1 = document.getElementById("pre1");
pre1.innerHTML = pre1.innerHTML;


up000001.jpg


改行が消える・・・

ほんとに改行があったのか、そしてなくなったのか確かめるため

alert(escape(document.getElementById("pre1").innerHTML));

で見てみると

innerHTMLに値を入れる前
up000002.jpg

innerHTMLに値を入れた後
up000003.jpg


改行コードが半角スペースに変換され、行頭半角スペースが無くなり
結果スペース1つになってしまいます。

innerHTMLを使用せずにhtmlソースを変更できれば何とかなりそうかな?


そしてこれによりわかったことは、
ソースを色分けしてくれる便利なJavaScript
「google-code-prettify」
これも色分けしたコードを出力する際innerHTMLを使っているので、
google-code-prettifyを使用して色分けしたコードは
表示では改行されていても、そのコードをコピペすると改行がなくなります。

google-code-prettifyで色分けされてるコードを
いろんなサイトから拾いコピペしてみたら、皆改行がなくなっていました。

createTextNodeを使用すると改行コードを入れられるみたいですが、まだ模索中です。
もうちょっと解決方法を探してみます。
もうしばらくpreもgoogle-code-prettifyもおあずけか・・・。


 |  16:14  |  プログラム全般  |  トラックバック(0)  |  コメント(0)  |  Top↑

2008.02.14 (Thu)

このfc2ブログで見やすいソースコードを書く時の苦悩

追記
この問題については解決しました。
fc2blogで色分けしたソースコードを表示する


このfc2ブログでソースコードを書く時にいつも悩むのが

<pre>タグ。

最初はこの<pre>タグを使っていたが、最近気づいたのが

<pre>タグ内に書いたソースコードをコピペすると改行がなくなる!!
ということ。

たとえば↓の枠内が<pre>タグ。

// この中がpre
int n = 0;
for(int i = 0; i < 100; i++)
{
if(i = 0) continue;
n = n + i;
}

見た目はまともだけど、これをメモ帳なんかにコピペしてみると

// この中がpreint n = 0;for(int i = 0; i < 100; i++){ if(i = 0) continue; n = n + i;}

↑こうなって貼り付けられる。

↓<code>タグで囲った場合

// この中がcode
int n = 0;
for(int i = 0; i < 100; i++)
{
if(i = 0) continue;
n = n + i;
}

編集時にはインデント(半角スペース)が入っているけど、それがなくなっている。
コピペする際には見た目のままコピペできる。

ソースコードってコピペして使用することが前提みたいなものだから、改行がなくなるとかとても困る・・・・
インデントがなくなるのも困る・・・

■ソースコード表示する際に欲しい条件
・インデントが表示される(タブか半角スペース。全角スペースは×)
・コピペしたときに改行がちゃんと入る。

■preタグに書く場合
[メリット]
 ・半角スペースやタブによるインデントがそのまま使用でき、ちゃんと表示される。
[デメリット]
 ・ブラウザからpreタグ内のソースコードをコピーすると<br />タグによる改行がなくなり1行になる。
 ・htmlソースのpreタグ内に改行コードが入っている状態であれば、
 コピーするときも改行が入るので、fc2ブログじゃなければ問題なく使えそう。

■codeなど、別のタグに書く場合
[メリット]
 ・ブラウザからコピペするときにちゃんとインデントや改行が入る。
[デメリット]
 ・半角スペースやタブによるインデントがなくなる。タブやスペースを&nbsp;に置き換える必要がある

ちなみに
<pre>
<code>
// この中がpre&code
int n = 0;
for(int i = 0; i < 100; i++)
{
  if(i = 0) continue;
  n = n + i;
}
</code>
</pre>
こんな感じでpreのなかにcodeをはさんでみたのがこれ


// この中がpre&code
int n = 0;
for(int i = 0; i < 100; i++)
{
if(i = 0) continue;
n = n + i;
}

preのみと同じで改行がなくなる。
いい方法が見つかるまではcodeのみだな・・・


 |  17:58  |  プログラム全般  |  トラックバック(0)  |  コメント(2)  |  Top↑
 | BLOGTOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。