如何在 Mkdocs 或 Sphinx 中创建选项卡式代码块？答案

【问题标题】：How to Create Tabbed Code Blocks in Mkdocs or Sphinx?如何在 Mkdocs 或 Sphinx 中创建选项卡式代码块？
【发布时间】：2016-06-03 05:03:23
【问题描述】：

有没有办法在 Mkdocs 或 Sphinx 中创建如下标签式代码块？

【问题讨论】：

不能肯定地说 Sphinx（你检查过他们的插件），但 MkDocs 不提供这样的开箱即用功能。您可能需要某种 JavaScript/CSS 解决方案来控制代码块的显示方式。虽然，您可以检查 Markdown 的第三方扩展。也许有人已经建立了一些东西。
谢谢韦兰。我会继续寻找，也许有人已经建立了你提到的扩展。
Sphinx-tabs 似乎是 Sphinx 的解决方案github.com/djungelorm/sphinx-tabs

【解决方案1】：

有sphinxcontrib-osexample，试图实现这样的功能，但是很简陋！

他们文档中的示例：

【讨论】：

【解决方案2】：

有markdown-fenced-code-tabs 扩展名。我将它与MkDocs 一起使用。

## Tabs 

```curl
$ curl -O wget http://example.com/pk.zip
```

```wget
$ wget http://example.com/pk.zip
```

## Single block

```
$ ls -lisa
```

变成

【讨论】：

【解决方案3】：

还有 https://github.com/mikecules/MarkdownBSCodeTabs 用于与 markdown-fenced-code-tabs 相同的 mkdocs

两者都有问题，如果你包含多个相同语言的代码块，它们都会以相同的名称显示，但你将无法在它们之间切换。

此外，spark 文档（用 Jekyll 编写）有很好的代码标签。

【讨论】：

【解决方案4】：

有一个 mkdocs 扩展 -CodeHilite- 它利用另一个扩展 -SuperFences- 可以为不同语言/情况下的代码示例创造奇迹。这是PyMdown 扩展集合的一部分。

此外，CodeHilite 还提供：

【讨论】：

【解决方案5】：

对于 mkdocs，您有 pymdownx.tabbed extension。

您必须在 mkdocs.yaml 文件中声明它：

markdown_extensions:
  - pymdownx.tabbed

那么你的 markdown 文件中的语法将是[取自文档]：

=== "Tab 1"
    Markdown **content**.

    Multiple paragraphs.

=== "Tab 2"
    More Markdown **content**.

    - list item a
    - list item b

保证可以很好地与material 主题配合使用（请参阅page with examples）。对于其他主题，您必须自己尝试。

【讨论】：