html - 仅使用 CSS 在 `pre` 或 `code` block 内设置注释样式

Question

有没有办法在 pre 中设置评论样式？或 code仅使用 CSS 阻止(例如 Ruby 注释)？

例如:

# I am a comment and should be lighter and italic
I = { :am => :normal_code, :and_want_no => :special_treatment }

我知道您可以使用 Javascript/jQuery 插入 <span>正确位置的元素(如 Stack Overflow 提供的上述评论中的 <span> )，但仅使用 CSS 可以完成吗？

对于背景，我使用输出简单的 Markdown 渲染器 <pre>和 <code>必要的元素，但没有任何钩子(Hook)来指示您使用的是哪种语言以及如何使用 <span> 标记评论元素。

Answer 1

此任务不能仅使用 CSS 完成。

CSS 在元素级别工作，它是 not possible to "select into" general text - 甚至是微不足道的，更不用说应用一些规则来解析语言语法了。

如前所述，并且通过检查 SO 代码呈现(例如本文中的代码)可以看出，一种方法是使用适当的 CSS 类(它们是单独语法处理的结果)输出跨度 - 然后是这些单独的跨度，可以选择的，有样式的。