在代码块内外的样式代码

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费信用额度!

HTML 中有一个 <code> 标签。我刚刚在上一句中用它来包装该标签——太元了。它是一个默认内联元素,表示任何类型的代码。它具有应用等宽字体族的默认(用户代理)样式,这感觉像是不错的默认值(因为确实如此,大多数代码都是用等宽字体查看的)。

/* User agent styles in all browsers */
code {
  font-family: monospace;
}

您很可能也会在样式表中使用该标签本身来设置样式。它只是这些元素之一,使用它本身似乎比将其重置为无样式并选择带有类的样式更自然。

/* You'll probably do this: */
code {
  /* custom styles */
}

/* Or maybe scope it to something like: */
article code {

}

/* It seems less common and more annoying to do this: */
code {
  /* reset styles */
}

code.some-class {
  /* opt-in styles */
}

在这个网站上(v18),我应用了一些适度的样式,并在文本元素中对其中一些样式进行了范围限定。

/* For all <code> */
code {
  font-family: MyFancyCustomFont, monospace;
  font-size: inherit;
}

/* Code in text */
p > code,
li > code,
dd > code,
td > code {
  background: #ffeff0;
  word-wrap: break-word;
  box-decoration-break: clone;
  padding: .1rem .3rem .2rem;
  border-radius: .2rem;
}

这有助于解决以下问题,例如,以下内容

<h3>The <code>.cool</code> Class</h3>

我的样式仍然会使它成为漂亮的等宽字体,将其大小调整为与标题相同,但不会应用我喜欢的代码在文本中使用的背景颜色和填充内容。

但是,当涉及到 <code> 的作用域样式时,更大的问题是这种非常常见的标记

<pre><code>
  example code block
</code></pre>

<pre> 标签对于显示代码块很重要,因为它会尊重 HTML 中的空白。但从语义上讲,它只表示“预格式化文本”。如果是代码块,也应该包含 <code> 标签。但是请记住,<code> 是一个内联元素。此外,您希望它在句子中的显示方式很可能与您希望它在块中的显示方式大不相同。

Jason 前几天在推特上谈到了这一点

线程中出现了一段时间的困惑,即

/* this was working */
.post :not(pre) code {

}

/* and this was not */
:not(pre) code {

}

第二个“在根部”选择器的问题在于 :not(pre) 将匹配某些内容(例如 <body>),从而应用这些样式。在帖子中(第一个示例),它只会选择某些内容(例如段落标签和图像等),从而表现得更符合预期。我认为这是一种不错的方法。这只是对 <code> 标签进行作用域限定的另一种方法,这样它在特定元素内时就不会获得某些样式,因为<pre> 标签是主要关注点。

我在此网站上有很多代码块,因此我尽量格外小心。我专门使用大量样式来设置 <pre> 标签内的 <code> 元素的样式,以使其符合我的要求,并可能抵消任何其他不良样式。例如

pre code {
  display: block;
  background: none;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
  overflow-x: scroll;
  max-width: 100%;
  min-width: 100px;
  padding: 0;
}

我的实际样式甚至比这更详细。该代码片段中没有任何巧妙之处。我只是指出,我应用了相当多的样式到代码块,以确保它们以正确的方式显示。

我发现 <code> 元素在根据上下文以不同方式设置样式方面有些独特,这很有趣。