如何偵測瀏覽器中的程式碼語言

儲存庫：https://github.com/ray-d-song/guesslang-js

示範：https://ray-d-song.github.io/guesslang-js/

最近在做一個叫EchoRSS的項目，有一個非常想要的功能，就是攔截訂閱中的外部連結（閱讀全文、引用等）並直接顯示在當前頁面上。

存在回傳的HTML程式碼區塊遺失語言標註的問題（或原程式碼區塊中的pre和code標籤上沒有標註語言），因此無法使用shiki或prism.js等工具進行高亮顯示。

我找到了三種偵測程式語言的解決方案：

1. 語言學家

這是一個部署在伺服器上的Ruby項目，Github使用它來偵測儲存庫的語言組成。如果你需要極高的精度並且可以在伺服器上計算，這是最好的解決方案。

2. HLJS

highlight.js 是一個非常有名的網頁程式碼高亮函式庫，也是唯一提供自動程式碼偵測的函式庫。

原理很簡單，就是枚舉該語言的關鍵字，然後將它們與文本一一匹配，最後看哪一個匹配度最高。

hljs 有四個問題。

• 需要非常長的程式碼長度，大多數語言至少需要300個字元才能達到相對較好的準確性。
• 偵測語言的部分並不是一個單獨的模組，而是與解析器和渲染器緊密耦合，而且程式碼也非常命令式，很難提取出有用的部分。
• 如果不提取偵測模組，在使用hljs高亮時，程式碼的原始格式（換行和縮排）將會遺失。
• 需要大量正規匹配，效能較差，且由於原因2，無法在Web Worker中運作。

3. 猜測

guesslang是一個基於tensorflow.js的機器學習專案。

微軟在2021年將此專案移植到node.js，並在vscode中加入了自動語言偵測功能。

三年前有個越南小夥hieplpvip也把這個項目移植到瀏覽器上，但是也存在三個問題：

• 記憶體洩漏，記憶體洩漏...
• 僅支援; tag引入umd格式，不支援esm，不支援bundle
• 同樣，由於原因2，它不支援Web Worker

這傢伙還沒有維護這個項目，三月支持esm的壯舉請求也沒有得到回應。

於是我從hljs中提取了檢測模組，並fork了guesslang-js來修復上述問題，最終guesslang獲勝，結果是這樣的：
https://github.com/ray-d-song/guesslang-js

我覺得說的太多了，也許以後有人需要，所以我就發一下。

如果有人了解tensorflow.js，希望能推薦一些學習資料，我想進一步修改為web gpu計算以提高效率。

以上是如何偵測瀏覽器中的程式碼語言的詳細內容。更多資訊請關注PHP中文網其他相關文章！