지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 브라우저에서 코드 언어를 감지하는 방법

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

Patricia Arquette
풀어 주다： 2024-11-27 00:13:10
원래의
1038명이 탐색했습니다.

How to detect code language in browser

저장소: 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도 이 프로젝트를 브라우저로 포팅했지만 세 가지 문제도 있습니다.

인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿