我給資料隻存在 localStorage 的實用備忘錄 添加了文法高亮和折疊功能

背景

上篇文章《我開發了個：所有資料隻儲存在 localStorage 的實用備忘錄》提到，我用 Ace 這個Web編輯器，實作了一個 網頁版 Sublime Text。臨時存一些文本、代碼、思路等，非常友善。

特點在于：

• 資訊隻儲存本地，非常安全。
• 響應速度非常快。
• 編輯器好用，支援搜尋、正則替換、多光标模式。
• 自動儲存，退出後，未主動儲存的檔案也會存下來。

但是沒有做文法高亮。這不太友善，是以我今天給它加上了「文法高亮和折疊功能」。

使用體驗

基于檔案名字尾識别

正如 Sublime Text 一樣，我不做預測，隻判斷檔案類型。使用者可以在左側的清單中，修改檔案名，用​

​.​

​加上字尾，告知系統這是什麼類型的檔案。于是編輯器就是用這種檔案對應的語言的文法。

檔案名字尾和對應的語言映射關系如下：

{
  "py": "python",
  "go": "golang",
  "js": "javascript",
  "ts": "typescript",
  "c": "c_cpp",
  "cpp": "c_cpp",
  "erl": "erlang",
  "hrl": "erlang",
  "kt": "kotlin",
  "md": "markdown",
  "proto": "protobuf",
  "conf": "nginx",
  "txt": "plain_text",
  "rs": "rust",
  "rb": "ruby",
  "v": "verilog",
  "vhd": "vhdl",
  "vhdl": "vhdl"
}      

此外，還有一些是檔案字尾能看出語言類型的，不需要做映射：

[
  "jsx",
  "tsx",
  "css",
  "scss",
  "less",
  "sql",
  "java",
  "ejs",
  "sh",
  "lua",
  "svg",
  "xml",
  "json",
  "yaml",
  "html",
  "ini",
  "php",
  "r",
  "scala"
]      

如果檔案字尾轉小寫後，不在上面的清單中，則認為是文本類型，沒有高亮和折疊。

隻要修改檔案名，文法高亮實時生效。

文法高亮動态加載

得益于 Ace 優秀的設計，我們可以懶加載文法配置。方法如下：

ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.12.3/');      

這句代碼設定了要請求的位址的基本路徑，後面會去拼接需要的文法檔案名。需要設定文法時，就這樣調用：

editor.session.setMode("ace/mode/" + mode);      

有哪些mode呢？可以在這裡搜尋到：cdnjs.com/libraries/a…

搜尋​

​mode-​

​即可找到有配置的文法檔案。

上面的文法映射，就是我手動添加的，篩選了一些自己認識的文法，把字尾映射到了文法檔案名上。

這樣設定好後，當你需要某種文法檔案時，會自動去下載下傳，下載下傳完畢後，立馬應用該文法。

此外，Ace 借助 service worker 實作了文法配置檔案的緩存。需要下載下傳某個配置檔案時，如果已有緩存，就直接取緩存中的檔案，不再下載下傳了。如下圖：

使用位址 & 源碼

快來體驗一下吧：

寫在最後