如何在Markdown代码块中为特定行设置自定义颜色？

常规Markdown代码块不支持直接内嵌CSS样式，要给HTTP请求里的Referer行单独标红，有两种实用方案：

方案一：用HTML标签替代纯代码块（兼容性最好） #

直接用<pre>标签包裹整个HTTP请求内容，给需要变色的行套上<span>并设置行内样式，大部分Markdown渲染器（如GitHub、Typora）都支持内嵌HTML：

GET /?search=foo HTTP/1.1
Host: insecure-bank.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: https://insecure-bank.com/
Connection: close
Cookie: session=4dcK7sqNQYBUau2QaGSPINQOewWDmQuf
Upgrade-Insecure-Requests: 1

这种方法不需要依赖语法高亮，直接实现指定行变色，适配绝大多数场景。

方案二：借助支持行高亮的Markdown扩展（需渲染器支持） #

如果需要保留代码块的语法高亮，可以用部分渲染器支持的行高亮语法，比如配合自定义CSS实现：

首先定义带行号和高亮标记的代码块：

GET /?search=foo HTTP/1.1
Host: insecure-bank.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: https://insecure-bank.com/
Connection: close
Cookie: session=4dcK7sqNQYBUau2QaGSPINQOewWDmQuf
Upgrade-Insecure-Requests: 1

{: linenos=table, hl_lines=[7]}

然后添加自定义CSS，将高亮行设置为红色：

.hljs-ln-code .hljs-ln-line.hljs-ln-highlight {
  color: red;
}

注意：这个方法依赖渲染器支持行高亮扩展，不是所有平台都适用。

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