使用CSS对“pre”或“code”块中的注释进行样式化 [英] Styling just comments inside a `pre` or `code` block with CSS

问题描述

有没有办法在 pre 或代码 ？

例如：

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

我知道你可以使用Javascript / jQuery插入< （例如Stack Overflow提供的注释中的< span> ），但是可以做到只有CSS

I know you can use Javascript/jQuery to insert <span> elements in the right spots (like the <span>'s in the comment above provided by Stack Overflow) but can it be done with just CSS?

对于背景，我使用markdown渲染器输出简单< pre> 和< code> 元素，但没有任何钩子指示您使用的语言，以及如何使用 ; span> 元素。

For background, I use a markdown renderer which outputs simple <pre> and <code> elements where necessary but without any hooks for indicating which language you're using and how to flag comments with <span> elements.

推荐答案

只需使用CSS。

CSS在元素级别工作，它是 不可能选择进入一般文本 - 甚至很简单，更少应用一些规则来解析语言语法。

CSS works at the element level and it is not possible to "select into" general text - even trivially, much less applying some rules to parse language grammar.

如上所述，通过检查SO代码渲染（如本文中的一个）可以看出，一种方法是使用适当的CSS类（这是单独的语法处理的结果）输出跨度 - 然后这些可以选择的单个跨度，样式。

As noted, and as seen by inspecting the SO code rendering such as the one in this post, one approach is to output spans with the appropriate CSS classes (which are the result of separate grammar processing) - then these individual spans, which can selected, are styled.

这篇关于使用CSS对“pre”或“code”块中的注释进行样式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！