💬 观点Simon Willison
github-code Web Component — 用Web Component嵌入GitHub代码片段,无需后端。
用Web Component嵌入GitHub代码片段,无需后端。
2026-07-07原文
本文为要点摘要,完整细节以原文为准。
🧭 一图看懂
由原文自动提炼 · 以原文为准点击任一分支,查看这一点的一句话解读
github-code Web Component 嵌…
用 Web Component 把 GitHub 文件指定行嵌入网页,无需后端
- 输入带 #L33-L54 行片段的 GitHub URL
- 显示行号,不做语法高亮
- 书签 URL 保留在页面 fragment 便于分享
⚙️ 流程拆解
STEP 1输入 GitHub URL 与行片段
STEP 2转换为…
STEP 3fetch() 拉取原始文件
STEP 4截取指定行范围
STEP 5带行号渲染到页面
🔗 涉及的概念与玩家
- github-code产品
- Web Component方法
- GitHub产品
- GPT-5.5模型
- Simon Willison人物
- raw.githubusercontent.com产品
- fetch()方法
- Simon Willison—构建→github-code
- github-code—由...生成→GPT-5.5
- github-code—基于→Web Component
- github-code—嵌入代码→GitHub
- github-code—使用→fetch()
- fetch()—请求→raw.githubusercontent.com
- 该组件将GitHub URL转换为raw.githubusercontent.com链接,通过fetch()获取文件内容,并显示指定行号范围的代码。
- 目前不支持语法高亮,但提供了轻量级嵌入方案,适合文档或博客中引用代码片段。
- 对开发者而言,这种模式简化了代码分享,无需依赖第三方服务或后端渲染,可直接在静态页面中使用。
原文:github-code Web Component · 作者 Simon Willison
🕸 顺着图谱继续读
- — a still that plays — Simon Willison 介绍了一个点击播放的 Web Component,2026-06-17 · 共同涉及 Simon Willison、Web Component
- datasette-auth-github 1.0 — Datasette 的 GitHub 登录插件升到 1.0,起因是一个 cook2026-09-19 · 共同涉及 Simon Willison、GitHub
- github-to-sqlite 2.9.1 — Simon Willison 发布 github2026-09-11 · 共同涉及 Simon Willison、GitHub
- Quoting huggingface.co/security.txt — Hugging Face 在 security.txt 里直接喊话 AI age2026-09-11 · 共同涉及 Simon Willison、GitHub