CSS Code highlighter - spacing between lines

Question

I have 3 questions,

Why is margin-top not working? Is it because they are inline elements or because they are in pre tag?
Is it a good idea to make a code highlighter in pre tag, or is there a better and simpler solution?
Is there any code highlighter CSS stylesheet? I need CSS stylesheet only as I don't know anything about JS, JQuery etc.

score 0 · Answer 1 · answered Apr 20 '13 at 14:03

0

Because they are inline elements:

strong { margin-top: 1em; }

<pre><strong>hello</strong></pre>
<strong>hello</strong>
(and 3) SyntaxHighlighter. CSS can't select specific words, so you will need to use JavaScript or add the tags server side.

answered Apr 20 '13 at 14:03

bookcasey

Wait, the `strong` tags were not inline before ! I have no idea how i missed that. So, margin wasn't applied when they were blocks but is applied when they are inline, that makes even less sense to me. Why is this happening? I changed my css but now I ran into new trouble, see this please: http://jsfiddle.net/Zdnsx/1/ – Sourabh Apr 20 '13 at 15:15

score 0 · Answer 2 · answered Apr 20 '13 at 14:03

There is no margin-top style.
It would make sense, as pre will make account for white-space off the bat.
A search for jQuery Syntax Highlighter will bring you to various resources, all which include CSS files for their syntax highlighting. Just figure out which stylesheet you need, use that one, and forget about the actual JS. Here's an example.

Quick note, though. When using a pre element for syntax highlighting, you'll notice that this:

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

Will yield:

Hello World!

Instead of

<a>Hello World!</a>

That is because you need to change your < and > to < and >, respectively.

2 Answers2