如何在GitHub风味Markdown中创建多标签表格用于API文档？

GitHub原生Markdown本身不支持你要的那种交互式多标签切换效果，但可以通过以下几种方式实现类似的展示效果：

方法一：用原生折叠块（

）模拟标签组 #

这种方法不需要额外工具，完全兼容GitHub的渲染规则，适合快速实现基础的多语言切换效果：

<details open>
  <summary>Java</summary>
  ```java
  // Java调用示例
  import com.example.api.Client;

  public class Main {
      public static void main(String[] args) {
          Client client = new Client("your-api-key");
          String result = client.callEndpoint("/data");
          System.out.println(result);
      }
  }

</details>

<details>
<summary>JavaScript</summary>
```javascript
// JavaScript调用示例
const { Client } = require('example-api');

const client = new Client('your-api-key');
client.callEndpoint('/data').then(result => console.log(result));

渲染后每个语言块可展开/收起，点击summary就能切换显示的代码，虽然不是顶部标签切换，但能实现多语言代码的分类展示。

方法二：用静态站点生成器构建专业文档 #

如果需要和示例完全一致的顶部标签切换效果，推荐用静态站点生成器托管文档，这类工具自带成熟的多语言标签组件：

推荐方案：MkDocs + Material主题 #

1. 安装依赖：

pip install mkdocs mkdocs-material

2. 在mkdocs.yml中启用代码标签功能：

theme:
  name: material
  features:
    - content.code.annotate
    - content.code.tabs

3. 编写文档时直接用标签语法：

=== "Java"
    ```java
    // Java调用示例
    import com.example.api.Client;

    public class Main {
        public static void main(String[] args) {
            Client client = new Client("your-api-key");
            String result = client.callEndpoint("/data");
            System.out.println(result);
        }
    }
    ```

=== "Python"
    ```python
    # Python调用示例
    import example_api

    client = example_api.Client(api_key="your-api-key")
    result = client.call_endpoint("/data")
    print(result)
    ```

=== "JavaScript"
    ```javascript
    // JavaScript调用示例
    const { Client } = require('example-api');

    const client = new Client('your-api-key');
    client.callEndpoint('/data').then(result => console.log(result));
    ```

4. 部署到GitHub Pages：执行mkdocs gh-deploy即可自动构建并托管到GitHub Pages，效果和你示例中的标签完全一致。

其他可选工具 #

• Docusaurus：React生态的静态站点生成器，支持代码标签组件
• VuePress：Vue生态的静态站点生成器，同样支持多语言代码标签

方法三：自定义HTML+CSS（效果有限） #

GitHub会过滤大部分自定义CSS，且禁用JavaScript，所以这种方法只能实现基础样式，切换功能无法生效，实用性很低，不推荐用于正式文档。示例代码参考：

<div style="display: flex; gap: 8px; margin-bottom: 8px;">
  <button style="padding: 4px 8px; cursor: pointer;">Java</button>
  <button style="padding: 4px 8px; cursor: pointer;">Python</button>
  <button style="padding: 4px 8px; cursor: pointer;">JavaScript</button>
</div>

<div>
  ```java
  // Java代码示例

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