브라우저에서 코드 언어를 감지하는 방법

저장소: 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 때문에 웹워커에서 실행할 수 없습니다.

3. 추측언어

guesslang은 tensorflow.js를 기반으로 한 머신러닝 프로젝트입니다.

Microsoft는 2021년에 이 프로젝트를 node.js로 포팅하고 vscode에 자동 언어 감지 기능을 추가했습니다.

3년 전 베트남 남자 hieplpvip도 이 프로젝트를 브라우저로 포팅했지만 세 가지 문제도 있습니다.

• 메모리 누수, 메모리 누수...
• <script>만 지원합니다. umd 형식을 도입하는 태그, esm을 지원하지 않음, 번들을 지원하지 않음</script>
• 마찬가지로 2번의 이유로 Web Worker를 지원하지 않습니다

그 사람은 이 프로젝트를 유지하지 않았고, 3월에 esm을 지원해 달라는 위업 요청에도 응답이 없었습니다.

그래서 나는 hljs에서 탐지 모듈을 추출하고, 추측 언어를 포크하여 위의 문제를 해결했고, 결국 추측 언어가 승리했고 결과는 다음과 같습니다.
https://github.com/ray-d-song/guesslang-js

말하기엔 너무 무리인 것 같고, 나중에 누군가 필요할 수도 있을 것 같아서 포스팅하겠습니다.

텐서플로우.js를 아시는 분이 계시다면 학습 자료를 추천해주셨으면 좋겠습니다. 추가적으로 웹 GPU 계산으로 수정해서 효율성을 높이고 싶습니다.

위 내용은 브라우저에서 코드 언어를 감지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!