用于嵌入 GitHub 代码片段的 Web Component

发布于

一个名为 github-code 的实验性 Web Component,用于在网页中嵌入 GitHub 仓库里的代码片段。

它的使用方式类似:

<github-code href="https://github.com/simonw/sqlite-ast/blob/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py#L9-L18"></github-code>

该组件会处理这类 GitHub 文件 URL,并将其转换为 raw.githubusercontent.com 上的原始文件地址,例如:

https://raw.githubusercontent.com/simonw/sqlite-ast/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py

随后,它会通过 fetch() 获取文件内容,并根据 URL 中的行号片段展示指定范围的代码行。

目前已知特性包括:

  • 支持从 GitHub 文件链接中提取仓库、提交哈希、文件路径和行号范围
  • 使用 fetch() 获取原始代码内容
  • 展示指定范围的代码行
  • 显示行号
  • 暂不支持语法高亮

这个组件的定位更接近轻量级嵌入工具,适合在文档、博客或技术页面中快速展示 GitHub 上的部分代码,而不需要手动复制代码片段。

浏览(27)
评论

请登录后发表观点

暂无数据