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> 

那是因爲你需要改變你的分別爲<和>至<和>。