如何检测浏览器中的代码语言

如何检测浏览器中的代码语言

存储库: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也把这个项目移植到浏览器上,但是也存在三个问题:

内存泄漏,内存泄漏…仅支持标签引入umd格式,不支持esm,不支持bundle同样,由于原因2,它不支持Web Worker

这家伙还没有维护这个项目,三月份支持esm的壮举请求也没有得到回复。

于是我从hljs中提取了检测模块,并fork了guesslang-js来修复上述问题,最终guesslang获胜,结果是这样的:
https://github.com/ray-d-song/guesslang-js

我觉得说的太多了,也许以后有人需要,所以我就发一下。

如果有人了解tensorflow.js,希望能推荐一些学习资料,我想进一步修改为web gpu计算以提高效率。

以上就是如何检测浏览器中的代码语言的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1498871.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 20:51:06
下一篇 2025年12月19日 20:51:18

相关推荐

  • Vue项目TypeError: Cannot read properties of undefined (reading ‘Vue’) 报错如何排查?

    vue 项目遭遇 typeerror:务必排查代码中的动态调用 无法找到原因的报错可能会令人抓狂,特别是当编译结果是正常的。如果您遇到过这样的报错: Uncaught (in promise) TypeError: Cannot read properties of undefined (readi…

    2025年12月19日
    000
  • 在多个注册表之间同步 NPM 包

    照片由 nicolas radzimski 在 unsplash 上拍摄 问题 我们的团队依靠内部 gitlab npm 注册表来管理包。这非常适合内部分发,但在某些情况下需要与外部协作者共享包。将包从内部注册表同步到外部注册表成为一项新的挑战。 我开始寻找解决方案,但像往常一样,遇到了一系列障碍,…

    2025年12月19日
    000
  • Nodejs 中的 Stripe 订阅集成 [终极指南]

    让 stripe 订阅与后端服务配合使用可能会很棘手,并且常常会导致开发人员所谓的可怕的“大脑分裂”——同步管理 stripe 的逻辑和您自己的后端数据。 在 vratix,我们在构建开源 stripe 订阅 api 模块时正面解决了这个问题。以下是我们如何在 node.js 中处理 stripe …

    2025年12月19日
    000
  • 计算机编程中的“pattern”究竟指什么?

    如何理解计算机中的“pattern”? 在计算机编程中,经常会遇到“pattern”这个词,它是一个非常重要的概念。它可以被翻译为“模式”,但是这个翻译并不完全准确,因为“模式”一词在中文语境中范围太大,容易造成混淆。 为了更准确地理解“pattern”在计算机中的含义,我们可以从一个例子入手: A…

    2025年12月19日
    000
  • 创建 CLI 来搭建扩展

    在之前的练习中,我们使用 typescript 构建了一个浏览器扩展。这涉及一系列步骤,包括创建 vite 项目并对其进行定制以满足浏览器扩展的特定要求。虽然该过程并不是特别漫长或复杂,但我们可以通过使用 node cli(命令行界面)实现自动化来进一步简化它。如果您是 cli 新手,请让我引导您完…

    2025年12月19日
    000
  • 如何快速稳定访问GitHub?

    稳定快速访问 github 对于日常开发人员来说,访问 github 十分重要,但有时,除了科学上网之外,在日常环境中打开 github 会遇到困难,严重影响工作效率。 针对这一问题,除了使用科学上网工具外,还有一些方法可以帮助你快速稳定地访问 github。其中一种方法是修改 hosts 文件。 …

    2025年12月19日
    000
  • 如何快速稳定地访问GitHub?

    如何快速稳定地访问 github? github 是许多开发人员不可或缺的平台,但由于服务器位于国外,国内访问时经常会遇到网络不稳定的问题。除了使用科学上网工具外,还有其他方法可以快速稳定地访问 github。 修改 hosts 文件 可以通过修改设备的 hosts 文件来解决访问 github 的…

    2025年12月19日
    000
  • 开发人员如何快速稳定地访问GitHub?

    如何快速稳定地访问 GitHub 对于开发人员来说,访问 GitHub 至关重要。但是,由于防火墙或网络问题,有时无法稳定访问 GitHub,这会严重影响工作效率。 以下介绍了一些无需科学上网即可快速稳定访问 GitHub 的方法: 手动修改 hosts 文件 使用 DNS 查询工具(例如 http…

    2025年12月19日
    000
  • 每个开发人员都应该掌握提高生产力和发展的基本工具

    在快速发展的软件开发世界中,生产力和持续增长至关重要。开发人员选择的工具可以显着影响他们的效率、创造力和职业发展。每个开发人员都应该掌握以下五个基本工具,以在他们的技术中脱颖而出: 版本控制系统(例如 Git)版本控制系统是现代开发工作流程的支柱。 Git 是最受欢迎的选择,它允许开发人员跟踪更改、…

    2025年12月19日
    000
  • Acro-Design中arco-scripts源码在哪里?

    如何在 Acro-Design 中查找 arco-scripts 源码 在 Acro-Design 源码中,我们可以看到有 arco-scripts 的引用。然而,在查找时却发现只有 npm 包而没有源码。因此,我们不禁好奇,acro-scripts 是否更换了仓库? 经过一番搜索和探究,我们找到了…

    2025年12月19日
    000
  • 基于 IT 的热门 CMS 比较(截至 4 月 4 日)

    DecapCMS(以前的 Netlify CMS) 统计数据:16,700 个 GitHub 星星 • 每周约 4 万次下载 • 400 多名贡献者链接:GitHub • NPM • 文档技术堆栈:框架不可知 • TypeScript 部分增长:明星增长 15%,NPM 增长 20%(6 个月)最适…

    2025年12月19日
    000
  • Arco-Design中acro-scripts源码去哪儿了?

    Arco-Design 中 Acro-Scripts 源码寻踪 在使用 Arco-Design 时,你可能会注意到其源码中包含 acro-scripts。但是,当你尝试查找其源码时,却只找到了 npm 包,而没有找到源码文件。你是否想知道这是否意味着开发者已将仓库迁移到了其他地方? 经过一番搜索,答…

    2025年12月19日
    000
  • Arco-Design项目中acro-scripts源码在哪里?

    如何在 acro-design 项目中找到 acro-scripts 源码? 在 acro-design 源码中,开发人员注意到存在对 arco-scripts 的引用。然而,在尝试查找该源码时,他们发现只有 npm 包可用,而源码似乎已消失。这引发了一个疑问:是否已更换代码仓库? 经过一系列搜索,…

    2025年12月19日
    000
  • Arco-scripts源码去哪儿了?寻找Arco-Design组件库脚本的历程

    勾勒 Acro-Scripts 源码之旅:仓库探寻之旅 前言: 在 Acro-Design 的源码探索中,大家发现提及了 arco-scripts,然而寻找源码却只找到了 NPM 包。探究背后的原因,仓库是否发生了变动?让我们踏上寻觅 arco-scripts 源码之旅。 探索之路: 一番搜索后,我…

    2025年12月19日
    000
  • Arco-scripts源码去哪儿了?如何找到arco-scripts的源码?

    如何获取 Acro-Design 的 arco-scripts 源码 在浏览 Acro-Design 源码时,人们注意到其中包含对 arco-scripts 的引用。然而,在尝试查找该源码时,却只发现了一个 npm 包,源码仍然无迹可寻。因此引发了疑问,arco-scripts 是否已更换仓库? 经…

    2025年12月19日
    000
  • 掌握 TypeScript 模板文字类型:提高代码安全性和表现力

    好吧,让我们进入使用模板文字类型在 typescript 中进行编译时元编程的迷人世界。这个强大的功能使我们能够创建一些非常酷的类型级魔法,使我们的代码更安全、更具表现力。 首先,模板文字类型到底是什么?它们是一种基于字符串文字操作和创建新类型的方法。这就像拥有一种适合您类型的迷你编程语言。很整洁,…

    2025年12月19日
    000
  • VShell:生产发布工作流程

    本周,我准备将我的命令行工具 vshell 发布到生产环境。此版本将使用户能够直接通过 npm 安装和使用 vshell,而无需在本地克隆和构建项目。该工具使用 javascript 和 node.js 编写,将托管在 npm 上以便于分发。以下是我实现此版本所遵循的步骤的详细分解: 自动化构建过程…

    2025年12月19日
    000
  • 使用 Cloudflare Workers 实施 Gmail 发送 – 开发指南

    这是使用 cloudflare workers 实施 gmail 发送系列的第 2 部分: 第 1 部分:设置 ✅第 2 部分:开发环境(当前)第 3 部分:实施(即将推出) 介绍 在第 1 部分中设置 gmail api 访问权限后,我们现在将为 cloudflare workers 配置开发环境…

    2025年12月19日
    000
  • 使用pnpm管理monorepo时如何克服目录结构限制?

    monorepo 不受固有目录结构限制 您在使用 pnpm 实现 monorepo 时遇到的目录结构限制并非不可克服。 解决方案: 遵守 monorepo 原则:monorepo 的目的是将多个项目存储在单个代码库中。因此,您需要将您的项目组织成单个存储库,其中每个项目都是一个单独的包。遵循预定义的…

    2025年12月19日
    000
  • 使用pnpm Monorepo共享代码:已有项目结构下如何共享组件?

    monorepo 的目录结构限制 在使用 pnpm 工作空间 YAML 文件实现 monorepo 时,预先配置的项目结构存在限制。例如,多个项目必须位于 packages/ 目录下,共享的子包必须位于指定的 components/ 目录中。 案例及疑问 如果已经建立了多个固定项目结构的子项目(例如…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信