CSS代码荧光笔 - 线条之间的间距

Question

请参阅此小提琴：http://jsfiddle.net/Zdnsx/

我有3个问题，

1. 为什么margin-top无效？是因为它们是内联元素还是因为它们是预标签？

2. 在预标签中制作代码荧光笔是一个好主意，还是有更好更简单的解决方案？

3. 是否有任何代码突出显示CSS样式表？我只需要CSS样式表，因为我对JS，JQuery等一无所知。

Answer 1

1. 因为它们是inline elements：

   strong { margin-top: 1em; }

   <pre><strong>hello</strong></pre>
<strong>hello</strong>

2. （和3）SyntaxHighlighter。 CSS无法选择特定的单词，因此您需要使用JavaScript或添加标签服务器端。

Answer 2

1. 没有margin-top样式。

2. 这是有道理的，因为pre将考虑蝙蝠的白色空间。

3. 搜索jQuery Syntax Highlighter会为您带来各种资源，其中包括用于语法突出显示的CSS文件。只需弄清楚你需要哪个样式表，使用那个样式表，忘记实际的JS。 Here's an example

---

但请注意。使用pre元素进行语法突出显示时，您会注意到：

<pre><a>Hello World!</a></pre>

将屈服：

Hello World!

而不是

<a>Hello World!</a>

这是因为您需要分别将<和>更改为<和>。