在 Google 文件顯示程式碼的技巧

如何順眼的呈現程式碼增添幸福感

Jui Yuan Liou
3 min readMay 24, 2020
Relax and chill

在眾多資料整理的解決方案中,Google 文件是當中很受歡迎的選項。
除了近似於 Word 的編輯界面,文件處理功能也很豐富強大。
資訊相關從業人員在整理文件時,有時會需要當程式碼附在其中,無奈的是 Google 文件沒有做相關調整,實在稱不上適合顯示程式碼的平台。

最近我也遇到類似的狀況,研究了一番後,發現可以透過幾個簡單技巧改善 Google 文件的程式碼顯示,主要分為兩個部份:

  1. 使用外掛程式改善語法高亮及排版
  2. 改用更適合程式碼顯示的字體

使用 Code Blocks 外掛程式

安裝外掛程式

從 Google 文件的功能選擇「外掛程式」 ->「取得外掛程式」

跳出外掛程式視窗後,在搜尋欄搜尋「Code Blocks」

安裝由 Alex Forsythe 製作的 Code Blocks 外掛程式

使用 Code Blocks

在文件裡,貼上或手打程式程式碼

選取程式碼,選擇上方工具列 -> Code Blocks -> Start
會跳出 Code Blocks 功能的側邊欄

選擇自己喜愛的 Syntax highlighting 後按下 Format,讓 Code Blocks 幫你做美化工作。本外掛程式不用特定選擇某一個程式語言, 它提供 auto 「自動辨識」功能。

由結果可以發現,比起單純改成等寬字體,用 Code Blocks 呈現過的程式碼在閱讀感受方面更上一層樓。

改用更適合的字體

Google 文件裡頭常用拿來顯示程式碼的字體是 Courier New、Consolas,但我們其實可新增更多的字體,例如 Fira CodeSource Code Pro

從字體選單,選擇「更多字體」

從顯示選單裡頭,顯示:所有字體 -> 等寬

本例以 Fira Code 為例,直接選擇即可

新增字體後,就能直接在字體選單裡頭選擇到剛剛新增的字體。
另外,Google 文件可以顯示 Font ligatures (連字功能,可以參考 Fira Code 說明頁面),如果選擇支援 Font ligatures 的字體,也能呈現。

--

--