使用 SQLize Embed 让您的技术教程互动

Source: Dev.to

如果你曾经编写过 SQL 教程或数据库文档，你一定深有体会。你提供了漂亮的代码片段，但为了让读者真正看到它的运行效果，他们必须：

• 复制代码。
• 打开本地终端或笨重的 IDE。
• 搭建数据库模式。
• 运行代码。

大多数读者不会这么做，他们只会继续滚动页面。

今天，我很高兴向大家介绍 SQLize Embed——一种轻量级、响应式且强大的方式，可将实时 SQL 沙盒直接嵌入你的博客、文档或教育网站。

什么是 SQLize Embed？

SQLize Embed 是一个客户端库，它将静态的 “ 元素转换为功能完整的 SQL 编辑器。该库由 SQLize.online 引擎驱动，允许用户在不离开页面的情况下对真实的数据库实例编写并执行 SQL。

关键特性

• 20+ 数据库引擎： 支持从经典的 MySQL 8.0/9.3、PostgreSQL (14‑18)、SQLite 3 到企业级的 MS SQL Server (2017‑2025)、Oracle 23ai 等。
• 即用型数据集： 想演示 JOIN 吗？使用预加载的数据库，如 Sakila (MySQL/MariaDB)、OpenFlights 或 AdventureWorks (MS SQL)。
• 现代编辑器体验： 基于 Ace Editor，提供语法高亮、自动缩进和专业的编码感受。
• 响应式 & 轻量级： 在移动端和桌面端都能无缝运行。
• 只读模式： 完美用于仅展示示例、让用户运行但不修改的场景。

30 秒快速上手

在你的网站上添加一个实时 SQL 沙盒，就像嵌入 YouTube 视频一样简单。

1. 引入脚本

在页面的 或闭合的 标签之前添加以下脚本标签：

<!-- Insert the SQLize Embed script here -->

2. 添加你的沙盒

创建一个带有 data-sqlize-editor 属性的 div。指定你想使用的数据库版本和初始代码：

-- Create a sample table
CREATE TABLE dev_to_fans (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100)
);

-- Insert data
INSERT INTO dev_to_fans (username) VALUES ('awesome_dev'), ('sql_ninja');

-- Run it!
SELECT * FROM dev_to_fans;

高级配置

你可以通过简单的 HTML 属性来自定义沙盒的外观和行为：

使用场景

• 交互式学习： 构建 “SQL 101” 课程，让用户直接在浏览器中完成挑战。
• 文档编写： 不再使用表格截图，让用户自行运行 DESCRIBE table。
• 技术博客： 用实时示例展示复杂的 PostgreSQL 窗口函数或新的 MariaDB Vector 类型。

试用在线演示

查看在线文档和各种示例：

• 👉 SQLize Embed Documentation
• 👉 SQLize Embed Showcase

加入社区！

我们正在不断添加对新数据库版本的支持（已经有 MS SQL Server 2025！）。如果你希望看到特定的数据库或数据集，请在评论中告诉我们！

祝编码愉快！ 💻

标签: sql database webdev tutorial productivity programming