如何在降价代码块中同时具有突出显示和文字 html 标签？

Question

有没有办法能够 mark/highlight 一段文本并在同一块中包含文字 <html> 标签？我想在这里实现类似 Listing 3.3 的东西。它不适用于围栏代码块，因为使用 <mark> 突出显示文本没有效果，而且它也不适用于 <pre><code>，因为 <html> 标签在 <pre><code> 标签不会按字面解释。我在 GFM 中使用 MacDown。

Answer 1

嗯，看来Macdownuses hoedown as its Markdown parser. Doesn't seem to be much documentation一下吧。因此，我将给出适用于大多数实现的通用答案。

如果你想在同一个代码块中混合使用 HTML 和原始 HTML，你要么需要构建自己的扩展来执行你想要的操作，要么自己手动构建代码块.构建你自己的扩展超出了这个答案，所以让我们专注于后者。

首先，您需要将代码块包裹在 <pre><code> 标记中，并确保不要缩进代码块的第一行，以便解析器将其视为原始 HTML.

其次，要将 HTML 包含到 "highlight"（或任何您想做的事情），请手动创建 HTML 标签来包裹代码块的各个部分。

最后，要在代码块中显示文字 HTML，您需要手动转义 HTML（或者可能使用工具为您转义）。

将三者结合起来，插入到你的Markdown文档中。例如，要复制您指向的示例，请执行以下操作：

<pre><code><span class="hll">HTTP/1.1 302 Moved Temporarily</span>
Cache-Control: no-cache
Content-Type: text/html; charset=utf-8
Location: http://quiet-waters-1228.herokuapp.com/hello
Server: thin 1.6.1 codename Death Proof
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Request-Id: e9785070-173c-4e8a-bbf5-1686806cbd6b
X-Runtime: 0.007276
X-Ua-Compatible: chrome=1
X-Xss-Protection: 1; mode=block
transfer-encoding: chunked
Connection: keep-alive

&lt;html&gt;
  &lt;body&gt;
    You are being
    &lt;a href="http://quiet-waters-1228.herokuapp.com/hello"&gt;redirected&lt;/a&gt;.
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

请注意，第一行包含在 <span> 中，并分配了 class 作为样式挂钩。它只需要一些 CSS。另请注意，块后面的文字 HTML 是用 > 和 < 手动转义以替换尖括号。以上将呈现为：

HTTP/1.1 302 Moved Temporarily
Cache-Control: no-cache
Content-Type: text/html; charset=utf-8
Location: http://quiet-waters-1228.herokuapp.com/hello
Server: thin 1.6.1 codename Death Proof
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-Request-Id: e9785070-173c-4e8a-bbf5-1686806cbd6b
X-Runtime: 0.007276
X-Ua-Compatible: chrome=1
X-Xss-Protection: 1; mode=block
transfer-encoding: chunked
Connection: keep-alive

<html>
  <body>
    You are being
    <a href="http://quiet-waters-1228.herokuapp.com/hello">redirected</a>.
  </body>
</html>

当然，您需要包含适当的 CSS 才能使 class="hll" 正常工作，我们不会在此处进行讨论。应该在您自己的站点上工作，您可以在其中提供自己的 CSS。

如何在降价代码块中同时具有突出显示和文字 html 标签？

How to have both highlighting and literal html tags within a markdown code block?

markdown