Simon Willison's Weblog

github-code Web Component

8.5内容质量

TL;DR · AI 摘要

基于GPT-5.5构建的GitHub代码嵌入Web组件，通过URL转换和fetch实现代码片段展示，但缺少语法高亮功能。

核心要点

  • 使用GPT-5.5生成Web组件，支持GitHub代码片段嵌入
  • 通过URL转换实现https://raw.githubusercontent.com代码获取
  • 当前版本不包含语法高亮功能

结构提纲

按章节快速跳转。

  1. §引言

    介绍github-code Web Component的实验性开发背景

  2. ·核心机制

    通过URL转换实现GitHub代码片段的获取与展示

  3. ›技术实现

    使用GPT-5.5生成组件，采用fetch()获取代码内容

  4. ›功能限制

    当前版本未实现语法高亮功能

  5. ›使用示例

    展示如何通过特定URL格式嵌入代码片段

思维导图

用一张图看清主题之间的关系。

查看大纲文本（无障碍 / 无 JS 友好）
  • github-code Web Component
    • 核心机制
      • URL转换
      • fetch获取代码
    • 技术实现
      • GPT-5.5生成
      • 无语法高亮

金句 / Highlights

值得收藏与分享的关键句。

#Web Component#GitHub#GPT-5.5#前端工具
打开原文

工具：github-code Web组件

Simon Willison的博客

订阅

#smallhead

由以下公司赞助：

Sonar — Gartner刚刚将Sonar评为2026年技术债务管理工具魔力象限™的领导者。阅读报告，了解如何衡量和修复代码库中的技术债务。

获取报告

2026年7月7日

工具

github-code Web组件

一个使用GPT-5.5构建的实验性Web组件，使用以下提示语：

让我们构建一个用于嵌入GitHub代码的Web组件 <github-code href="https://github.com/simonw/sqlite-ast/blob/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py#L9-L18"></github-code> 它会将类似这样的URL转换为https://raw.githubusercontent.com/simonw/sqlite-ast/437c759129154f05296324a7f82aa1246340dd14/sqlite_ast/parser.py，然后使用fetch()获取代码并显示指定的代码行范围（带行号，但没有语法高亮）。请展示一个预览网页浏览器让我查看你的作品

这是嵌入到本文页面后的效果：

发布于

下午4:18

最新文章

  • sqlite-utils 4.0，新增数据库模式迁移功能 - 2026年7月7日
  • sqlite-utils 4.0rc2，主要由Claude Fable编写（约花费149.25美元） - 2026年7月5日
  • 让你的代理使用shot-scraper视频录制工作演示视频 - 2026年6月30日

#primary

这是Simon Willison于2026年7月7日发布的一篇作品。

github

189

web-components

26

gpt

128

月度简报

每月赞助我10美元，即可获得精选的LLM最新进展电子邮件摘要。

让我少发点邮件吧！

赞助并订阅

.metabox

#secondary

#wrapper

  • 披露信息
  • 制作团队
  • ©
  • 2002
  • 2003
  • 2004
  • 2005
  • 2006
  • 2007
  • 2008
  • 2009
  • 2010
  • 2011
  • 2012
  • 2013
  • 2014
  • 2015
  • 2016
  • 2017
  • 2018
  • 2019
  • 2020
  • 2021
  • 2022
  • 2023
  • 2024
  • 2025
  • 2026