如何在GitHub中创建带标签页的代码片段（含示例样式需求）

嘿，刚好我经常在GitHub上折腾这类代码展示，这就把方法和示例分享给你！GitHub的Markdown现在原生支持多标签切换的代码块，不用额外工具，几步就能做出清爽的标签页样式～

核心语法说明 #

GitHub支持用tabbed code blocks实现标签页效果，核心是用六个反引号包裹整个标签组，里面每个代码块对应一个标签：

``````tabs
```[语言名/自定义标签]
你的代码内容

另一部分代码内容

```

### 两种标签设置方式
1. **直接用语言名**：比如`javascript`、`python`，GitHub会自动识别并开启对应的语法高亮，标签显示就是语言名
2. **自定义标签文本**：用`tab:你的标签名`格式，比如`tab:前端交互代码`，这样标签会显示你自定义的文字；也可以同时加上语言名来开启高亮，比如`tab:前端代码 javascript`

## 类似示例样式的完整代码
下面是一个贴近常见需求的示例，模拟前后端代码切换的标签页：

``````tabs
```tab:HTML结构 html
<div class="app-container">
  <h2>用户信息展示</h2>
  <div id="userCard"></div>
  <button id="refreshBtn">刷新数据</button>
</div>
```
```tab:JavaScript交互 javascript
const refreshBtn = document.getElementById('refreshBtn');
const userCard = document.getElementById('userCard');

refreshBtn.addEventListener('click', async () => {
  try {
    const res = await fetch('/api/user');
    const user = await res.json();
    userCard.innerHTML = `
      <p>用户名：${user.name}</p>
      <p>邮箱：${user.email}</p>
    `;
  } catch (err) {
    userCard.textContent = '获取数据失败';
  }
});
```
```tab:Node.js后端 nodejs
const express = require('express');
const app = express();

app.get('/api/user', (req, res) => {
  res.json({
    name: 'John Doe',
    email: 'john@example.com'
  });
});

app.listen(3000, () => {
  console.log('服务启动在 http://localhost:3000');
});
```

在GitHub上，这个代码块会显示三个可切换的标签，每个标签对应不同的代码片段，还会自动应用语法高亮，看起来非常整洁。

注意事项 #

• 一定要用六个反引号包裹整个标签组，里面的单个代码块用三个反引号，别搞混了
• 如果需要语法高亮，尽量在标签里指定语言名（比如上面示例里的html、javascript），不然代码会是纯文本显示
• 这种语法在GitHub的README、Issue、PR描述、Wiki里都能正常生效，不用额外配置
• 要是你需要更个性化的样式（比如自定义标签颜色），普通的GitHub页面不支持，但如果是GitHub Pages，可以自己加CSS来定制

内容的提问来源于stack exchange，提问作者Sato