css - CSS 代码荧光笔 - 行间距

Question

看到这个小提琴：http: //jsfiddle.net/Zdnsx/

我有3个问题，

1. 为什么margin-top不工作？是因为它们是内联元素还是因为它们在 pre 标签中？

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

3. 是否有任何代码荧光笔 CSS 样式表？我只需要 CSS 样式表，因为我对 JS、JQuery 等一无所知。

Answer 1

1. 因为它们是内联元素：

   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。这是一个例子。

---

不过请注意。当使用一个pre元素进行语法高亮时，你会注意到：

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

将产生：

Hello World!

代替

<a>Hello World!</a>

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