Syntax Highlighter是很多人在用的語法標記外掛,可以為網頁中的Html、C#、Java、PowerShell、Perl、PHP… 等各種語言加上行號及為關鍵字/註解/字串標上不同顏色,大幅提高可讀性。Syntax Highlighter的新版修改了程式碼複製貼上的寫法,標榜可以不再依賴Flash,只要在程式碼的所在位置點兩下,按下Ctrl-C,就可以把原始程式碼帶回家。

今天使用Chrome複製程式碼貼上NodePad++,發現一個狀況。以Syntax Highlighter首頁為例,在Demo區連點兩下選取程式碼內容後按Ctrl-C,用NotePad++新增一個空白文件按Ctrl-V貼上,出現以下結果:

// SyntaxHighlighter makes your code
// snippets beautiful without tiring
// your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
????this.length = 0;
????push.apply(this, elems);
????return this;
}

程式碼前置空白變成問號(?)!!

試了不同瀏覽器及不同文字編輯器的組合,觀察到以下結果:

  1. 使用Chrome、Safari及Opera才會產生問號,IE、Firefox則不會。
  2. 若改將複製內容貼在記事本(Notepad)或Word,也不會出現問號。
  3. "?"是Unicode解碼失敗常見的結果,故試著將Notepad++的文件編碼由ANSI改成UTF-8,也可避免問題。

初步推論是Chrome、Safari、Opera等瀏覽器在複製時在存入Unicode,遇上文字編輯器使用ANSI解析剪貼簿的內容,導致解析失敗,抛出"?"收場。用中文編碼解析器分析,確認變成問號的部分是" ",一切有了合理解釋。

不過還是好奇追進了Syntax Highlighter的Source Code,發現原來不靠Flash的複雜做法是在背後建了一個隱藏的<textarea>,其中放入程式碼的文字內容,然後呼叫textarea.focus(); textarea.select(); 當使用者按下Ctrl-C時,就等同將<textarea>的內容複製到剪貼簿中。(真是巧妙的做法,立刻抄筆記...)

了解原理後,試做一個重現問題的快沖茶包:

$("body").html("&#160;&#160;&#160;<input type='text' value='&#160;&#160;&#160;' />");

有興趣的人可以用Chrome、Safari、Opera開啟Mini jQuery Lab玩看看,選取複製<input>的內容在Notepad++貼上會出現"???"。

而更好玩的一點: 我在<input>前方也放了三個&#160;,也可以複製貼上。但只有<input> Value中的空白在貼上時會變成問號,網頁內容中的&#160;貼上時則會被轉成空白(0x20),默默將這點差異記在"跨瀏覽器求生手冊"裡。


Comments

# by QQBoxy

也發現這個問題的我到此來留言一下... 目前不知道該如何解這個問題, 不過自己反白來複製原始碼就沒有這個問題... 真是怪哉...

# by QQBoxy

補充...這個問題在這邊有討論串: https://bitbucket.org/alexg/syntaxhighlighter/issue/174/double-click-and-copy-spaces-copied-as-c2 雖然我在Google Blogger測試還是失敗了= ="

# by QQBoxy

今天想說來解決一下上次那個問題, 結果才發現上次改的時候少打一個字, 所以難怪失敗了XD 目前已經解決囉, 並在我自己網誌放上我完整的原始碼了~

Post a comment


71 + 9 =