Markdown 下拉菜单中语法突出显示的代码

Question

我正在使用 markdown 为我的 Github 存储库编写自述文件。在自述文件中的某一时刻，我有用户可以复制粘贴的 C# 代码。这段代码很长 - 确切地说，有 54 行 - 我不希望它污染 README 的其余部分（很长）。解决方案是创建一个下拉菜单，由于 Markdown 支持内联 html（在大多数实现中，包括 Github 的），因此可以使用 html 来完成：

<details>
<summary>Code</summary>
<br>
using System;
using System.Collections;

public class MyClass
{
    // Class body here
}
</details>

这可行，但很难看 - 它只是纯文本，而不是代码。我们可以通过将其放在

<code>

标签中来做得更好，这使得文本看起来像

this

:

<details>
<summary>Code</summary>
<br>
<code>
using System;
using System.Collections;

public class MyClass
{
    // Class body here
}
<code>
</details>

但是，这仍然没有语法突出显示。在markdown中，你可以使用````来实现语法高亮代码，如下所示：

``` c#
using System;
using System.Collections;

public class MyClass
{
    // Class body here
}
```

但是，html 没有相应的功能。

我尝试使用 将 markdown 嵌入到嵌入 markdown 的 html 中，如下所示：

<!-- File: code_snippet.md -->

``` c#
using System;
using System.Collections;

public class MyClass
{
    // Class body here
}
```

<!-- File: README.md -->

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>

<details>
<summary>Code</summary>
<br>
<zero-md src="code_snippet.md"></zero-md>
</details>

但是，这不起作用，因为 markdown （出于明显的原因）不允许执行客户端脚本 - 据我所知，

<script>

标签已被完全忽略。

我想不出其他的事情了。我很困惑。是否可以在 html 中实现语法高亮，或者我只需要满足于

<code>

？或者也许我想错了，在markdown方面有一些方法可以解决吗？

如果解决方案允许我将代码片段和 README.md 分成单独的文件，然后将代码片段包含在下拉列表中，而不是必须将原始内容粘贴到那里并污染 README 的代码，那就更好了。但这只是一个奖励。

Answer 1

截至 2021 年 9 月的最后一次更新，Markdown 本身并不支持下拉列表中代码的语法突出显示。但是，您可以使用 HTML 和支持 HTML 渲染的 Markdown 风格来实现此效果，例如 GitHub 风格的 Markdown (GFM)。

下面是如何使用 GFM 创建带有语法突出显示代码的下拉列表的示例：

<details>
  <summary>Click to expand code</summary>

  ```python
  def hello_world():
      print("Hello, world!")

````

在支持 GFM 的平台（例如 GitHub）中渲染时，

<details>

和

<summary>

标签内的代码最初将被隐藏。当用户点击“点击展开代码”摘要时，代码将被显示，并且它将被语法高亮显示为Python代码块。

请记住，并非所有 Markdown 解析器都支持 HTML，因此这可能不适用于所有 Markdown 环境。此外，自上次更新以来，Markdown 规范和功能可能已发生变化。您可能需要检查特定 Markdown 渲染平台的最新文档或指南，看看是否有任何新的开发或语法扩展用于处理下拉列表中的代码。

来源：https://www.w3seekers.com/md/md-code-blocks.html