highlight.js

星期四, 9月 29, 2016

Arduino 1.6.10 編譯中文資料夾下的程式問題

從 Arduino 1.6.10 版開始, 如果你的專案儲存在有中文名稱的路徑下, 而你的程式中又包含有函式的定義在呼叫函式處之後的狀況, 例如以下的範例:
其中 foo() 定義在程式最尾端, 但是在程式一開始的 setup() 中就呼叫了 foo()。這時編譯會出現 "'foo' was not declared in this scope" 錯誤訊息。只要把程式移到沒有中文名稱的路徑下就可以正常編譯。推測可能是 Arduino 1.6.10 之後, 在編譯的細節中有所變動, 導致編譯前段蒐集所有定義項目的資訊無法存回存到位在中文名稱路徑下的專案資料夾, 因而在後段編譯時認不得這些定義在引用處之後的名稱。 附註:在『文件』以及『桌面』下並不會有問題, 因為實際上『文件』與『桌面』的真實資料夾名稱是 Document 與 Desktop, 並不含中文。

星期三, 9月 28, 2016

在 Visual Studio Code 為新語言增加語法標示 (Syntax Highlighting)

Visual Studio Code 寫程式很好用, 但如果遇到特殊或是很新的語言, 就不見得有前人製作好的套件可以幫程式碼標示語法, 這時候就只好自己動手做了。這得自行設計好對應該語言的語法規則套件, 相關說明可參考 Visual Studio Code 的文件。大致步驟如下:
  1. 撰寫該語言的語法規則檔
  2. 以語法規則檔為基礎建立該語言的擴充功能 (extension)
  3. 將建立好的擴充功能加入 Visual Studio Code 後重新啟動 Visual Studio Code
  4. 開啟該語言的檔案或手動選用該語言擴充功能, 就可以看到語法標示發揮效用
首先, Visual Studio Code 沿用了 Mac 上知名的文字編輯器 TextMate 的語法規則檔格式,名稱為 tmLanguage, 可參考 TextMate 網站上的說明。它其實是依循 Properties List Format 格式的 XML 檔, TextMate 本身有提供工具可以編修 tmLanguage 檔, 如果要手工編輯 XML 檔, 我想大部分的人都會卻步, 還好有善心人士設計好工具可以讓我們用 JSON 或是 YAML 格式來編寫語法規則。由於 TextMate 工具與網頁上的說明範例跟 JSON 較相近, 因此我建議採用 JSON, 大家應該可以很容易將 TextMate 網頁上的範例轉換成 JSON 格式。 使用 JSON 寫好語法規格後, 請先安裝 Visual Studio Code 上的 TextMate Language 擴充功能 (extension),它提供有從 JSON 轉成 tmLanguage 格式的功能:
轉換結果會建立一個與你的 JSON 檔同名的文檔, 但附檔名是 tmLanguage, 這個檔案才是符合 TextMate 的語法規則檔, 存檔後就可以進行下一步。 Visual Studio Code 中的語法功能必須建立成擴充功能, 微軟已經幫大家準備好工具, 可以從 tmLanguage 檔自動設計好擴充功能, 這個工具叫做 'code'-Yeoman Generator, 請依照網頁上的說明安裝 (它需要 node.js 以及 npm 套件管理程式)。安裝完成後即可以下達 yo code 指令建立語言擴充套件:
選取『New Language Support』就會進入選項, 你必須依序回答 tmLanguage 檔的位置、此種語言的副檔名、在 Visual Studio Code 中該語言的識別名稱等等,完成後會以你指定的識別名稱建立一個新資料夾, 裡頭就是它幫你設計好的語言擴充功能。 接著, 只要把該資料夾複製到你的 Visual Studio Code 擴充功能資料夾下即可, 一般就是 C:\Users\使用者名稱\.vscode\extensions, 重新開啟 Visual Studio Code 就可以讓語言擴充套件生效了。像是以下就是我建立的新語言擴充功能, 叫做 FLAG-TXT, 專門用來顯示我服務的公司制式文字檔稿件的格式:
在右下角可以看到目前套用的語言名稱為 FLAG-TXT,畫面中也可以看到小節、中標、圖片標示處以及內文中用全行括號標示的加粗文字都會以不同顏色及樣式顯示。 完成了語言法標示後, 你可能還需要為該種語言加上 auto completion 以及 code snippets, 使用起來就會更便利。

附註:TextMate 的語法規則檔不只 Visual Studio Code 使用,鼎鼎大名的 Sublime Text 以及 Atom 也都是使用同一格式來描述語法的規則, 儼然成為文字編輯器界的標準了。

星期六, 6月 11, 2016

保留 Arduino 程式碼語法上色貼到 PowerPoint 的方法

我目前的工作需要用投影片解釋 Arduino 程式, 最理想的結果就是可以貼上和 Arduino 開發環境中同樣顏色標示語法的程式碼, 所需的步驟如下。

先在 Arduino 開發環境中選取要貼到 PowerPoint 的程式段落, 然後按滑鼠右鍵選取『當作 HTML 進行複製』, 這個功能會用 HTML 碼描繪所要複製的程式碼:


接著, 可以將複製的 HTML 碼貼到文字檔中, 然後用瀏覽器開啟檢視, 或是使用線上的 HTML 檢視器 (例如:http://codebeautify.org/htmlviewer/) 直接貼上 HTML 碼後檢視, 然後複製瀏覽器上 HTML 碼的顯示結果:



再將複製的內容貼到 Word 中,這個步驟看起來好像多餘, 但如果你直接把從瀏覽器複製的內容貼到 PowerPoint, 雖然程式碼的語法顏色都會正常顯示, 但是會變成沒有斷行的一長串文字, 像是這樣:


因此, 要先貼到 Word 中, 再從 Word 中複製一次內容:


最後, 再將從 Word 複製的內容用『選擇性貼上』的方式:


再選取『格式化文字 (RTF)』:

 
就可以貼上保留語法顏色標示的程式碼了:

星期一, 3月 07, 2016

ESP8266 韌體燒錄

ESP8266 是創客界的實用玩具, 許多人都客製了不同的韌體, 以下蒐集了幾種不同的韌體供大家切換使用:
另外, 為了將韌體燒錄到 ESP8266 上, 你會需要燒錄工具, 我自己覺得最方便使用的是 NodeMCU Flasher,  只要在 Config 頁次選擇要燒錄的韌體, 並在 Operation 頁次選取正確的序列埠後, 按下 Flash 按鈕即可燒錄。

星期六, 2月 13, 2016

Google Drive 相同檔名重複儲存的怪問題

我很喜歡雲端硬碟, 可是在我的使用經驗中, 只有 Dropbox 幾乎算是無痛使用, OneDrive 則是同步速度有點緩慢, 而 Google Drive 常常有些我不能理解的作法, 比如說你如果透過網頁拖放的方式上傳檔案, 就可以像是這樣上傳同樣的檔案多次, 而 Google Drive 就會出現重複的同名檔案:
糟糕的是它就是兩個同樣名稱的檔案, 也不會加上像是 "(1)" 的字尾區分, 所以如果你不注意, 就會在 Google Drive 中重複多份檔案, 佔用空間配額。

更遭的是, 如果你有檔案放置在其他使用者與你共用的資料夾中, 還可能會發生這樣的情況, 共用資料夾所有者刪除了某個檔案, 而你再重新上傳同一個檔案, 很可能會發現兩個檔案都佔據了空間, 而且在你的 Google Drive 中看不到已經被刪除但仍佔據空間的檔案。要找出這種檔案, 目前我所知的方法就只能利用網頁介面左邊『已使用 XX GB』的儲存空間使用資訊中顯示個別檔案佔用的空間配額:
只要點選『雲端硬碟』後面的 i 圖示, 就可以顯示所有檔案的佔用大小。或者你也可以用搜尋的方式, 像是以下就是我自己 Google Drive 上找到的例子:
在這個例子中, 你可以看到同樣的檔名可以找到 3 個檔案, 其中第一個檔案是目前儲存在 Google Drive 的檔案, 你可以在底下看到這個檔案的路徑。 如果點選第二個檔案, 你會發現下方無法顯示它的儲存路徑, 而且右邊的資訊欄中也告訴了我這個檔案已經被共用資料夾的使用者刪除了:
但是這個檔案仍然佔據了 Google Drive 的儲存空間, 解決的方案就是刪除它, 清空 Google drive 的垃圾桶。至於第 3 個同名檔案, 則是共用資料夾所有人的檔案連結。

我之前一直覺得很疑惑, 明明看我自己硬碟上 Google Drive 同步的內容只有大約 3GB, 為什麼看空間配額一直說我佔用了 14GB, 利用上述方式重新檢視之後, 現在就恢復成 3GB 了。