css - CSS コード ハイライター - 行間の間隔

Question

このフィドルを参照してください: http://jsfiddle.net/Zdnsx/

3つ質問があります。

1. なぜ機能しないのmargin-topですか？それらがインライン要素であるためですか、それともプレタグにあるためですか?

2. タグの前にコード ハイライターを作成するのは良い考えですか、それとももっと簡単な解決策がありますか?

3. コード ハイライター CSS スタイルシートはありますか? JS、JQueryなどについて何も知らないので、CSSスタイルシートのみが必要です。

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>

<これは、と>を<と>にそれぞれ変更する必要があるためです。