ソースコードを綺麗に行番号付きで添付しているページをよく見かけます。
「SyntaxHighlighter」を使っているらしいのですが、ソースを範囲指定しようとすると行番号も一緒になり、
行番号付きでコピペしてしまうのでとても不便です。
調べてみると、ここのやり方でソースコートを表示させると、ソースだけコピペできるので非常に便利です。
で、どうせなら、編集できる様になると嬉しい。
と云う訳で・・・
ＨＴＭＬ５で contenteditable 属性というのが追加され、ブラウザの画面で、その部分だけテキストを編集できるそうです。
じゃぁ~組み合わせれば・・・・
と思って
<pre class=”brush: ruby;” contenteditable=”true”>
としてみたら、「SyntaxHighlighter」が
<pre>・・・</pre>を
<div>・・・</div><div>・・・</div><div>・・・</div><div>・・・</div>・・・と変換していたので失敗。
なので
<div contenteditable=”true”>
<pre class=”brush: ruby;”>
・・・
</pre>
</div>
と<pre>部分を<div>で包んだらどうなるんだろう？
ソースの代りに、WordPressの投稿の編集の「テキスト」モードから記事をコピペしてHtmlなEscapeテキストを表示してみた結果は、
まぁまぁ良い感じになりました。
でも、ちょっと遊んでみると・・・
- 欠点１： 編集して文字を入力しても、テキスト文字の色は周囲と同じ。
- 欠点２： 行を増やしても行番号が増えない！
- 欠点３： 一部文字の色が真っ黒の部分（２５行目付近）は悲惨！
- 欠点４： 画面右上隅に？が出る。
- 欠点５： 最後にはグッチャグチャ（笑
って、感じです。
そうそう簡単にはいきませんよね？（爆
contenteditable との組み合わせなんて、気が付けば誰でもやるだろうし・・・
これからが楽しみだなぁ～（笑
参考１： ソースコードを行番号付きで、きれいに表示する「SyntaxHighlighter」の導入と使い方
参考２： [HTML5API] contentEditable 属性を使用したリッチテキストエディタの実現