在线代码示例

本站 ```html 与 ```js 代码块默认基于 vitepress-plugin-sandpack（CodeSandbox Sandpack 引擎）提供在线沙箱：左侧为代码编辑器（可直接修改），右侧为预览窗口，点击预览区的「Run」按钮后运行。无需本地环境。

依赖 node、jQuery 等浏览器沙箱给不了的环境、无法运行的代码块，用 nolive 退出沙箱，只展示代码：

markdown

```javascript nolive
const express = require('express');   // 浏览器沙箱没有 require
```

整篇都是此类代码的文档（如 13 周包管理、07/08 周 jQuery），在文件头加 frontmatter 一次关掉全篇：

yaml

---
nolive: true
---

HTML 示例

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

JavaScript 示例

JS 沙箱底部带控制台面板，console.log 的输出显示在这里。

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

说明

代码在浏览器本地沙箱 iframe 中编译运行，与页面本身隔离，可放心修改试验
预览区工具栏可打开完整控制台、在 CodeSandbox 中继续编辑
教材语境中不需要运行的伪代码/片段，运行面板可能显示错误——把错误当练习

在线代码示例 ​

HTML 示例 ​

JavaScript 示例 ​

说明 ​

在线代码示例

HTML 示例

JavaScript 示例

说明