---
title: "github-code Web Component：用 GPT-5.5 构建的 GitHub 代码嵌入组件"
source: "Simon Willison 博客（Atom）"
source_tier: "t2"
url: "https://simonwillison.net/2026/Jul/7/github-code-component/#atom-everything"
permalink: "https://feed.astralor.com/items/itm_89e9d622919f2eae7cddc34d"
published: "2026-07-07T16:18:16.000Z"
score: 72
channel: "ai"
tags: ["github-code","GitHub 集成","GPT-5.5","Web Components"]
---

# github-code Web Component：用 GPT-5.5 构建的 GitHub 代码嵌入组件

## AI 点评

> 如果你经常在博客或文档中引用 GitHub 上的代码片段，这个组件能省去手动转换 URL 的麻烦。虽然功能简单，但它是 GPT-5.5 直接生成实用工具的范例，值得关注 AI 辅助前端开发的新趋势。

## 速览

Simon Willison 发布了一个实验性的 Web Component——github-code，它由 GPT-5.5 生成，允许通过简单的 HTML 标签嵌入 GitHub 仓库中的指定代码行范围。该组件自动将标准 GitHub URL 转换为 raw.githubusercontent.com 链接，然后使用 fetch() 动态获取内容并显示行号。目前不支持语法高亮，但为博客、文档等场景提供了一种简洁的代码引用方式。

## 关键点

- 实验性 Web 组件，由 GPT-5.5 根据提示生成
- 支持嵌入 GitHub 代码片段，自动转换 URL 并获取文件
- 显示行号，无语法高亮
- 基于 fetch() 动态加载，使用简单 HTML 标签

## 全文

Tool: github-code Web Component An experimental Web Component built using GPT-5.5 and the following prompt: let's build a Web Component for embedding code from GitHub <github-code href="https://github.com/simonw/sqlite-ast/blob/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py#L9-L18"></github-code> It takes URLs like that, converts them to https://raw.githubusercontent.com/simonw/sqlite-ast/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py, then uses fetch() to fetch them and displays the specified range of lines - with line numbers, no syntax highlighting though Show me a preview web browser so I can see your work Here's what it looks like embedded on this page: Tags: github, web-components, gpt

---

引用前请核对原文;本文由星际流动整理:https://feed.astralor.com/items/itm_89e9d622919f2eae7cddc34d