Nice stylesheet for displaying code in HTML?

Question

I'd like to display snippets of programming language code, and also HTML code, inside an HTML document using CSS. I want it to be indented and in fixed-width font... I'm thinking of something like:

<blockquote style="some_style">
my code here
my code here also
</blockquote>

and have it appear in a nicely formatted way (bonus if it's color coded, but doesn't have to be.

what kind of stylesheet can I use to define this sort of style?

thanks.

Answer 1

Well, you could try using a <pre> tag in your blockquote to preserve the formatting first, and then use a monospaced font, like console for the css style.

Something like this would work in the css:

pre {
  font-family:     "Courier New"
                    Courier
                    monospace;
}

Answer 2

First, I would show the code in a <pre> </pre> element give the pre element a nice style in your css and call it a day.

Answer 3

Try using SyntaxHighlighter.

Answer 4

<pre> would automatically retain your tabs and line-breaks within the bounding pre tags. Most browsers automatically default to a monospaced font inside pre but if you want to force it, (which is a good idea) you can use the following CSS:

pre { font-family: monospace; }

I would recommend that you not place code directly into a <blockquote> element. It is semantically incorrect.

If you want your code to be semantically correct, you should mark it up like this:

<pre><code>
My pre-formatted code
    here.
</code></pre>

If you are actually "quoting" a block of code, then the markup would be:

<blockquote><pre><code>
My pre-formatted "quoted" code here.
</code></pre></blockquote>

If you want even better-looking code, you can employ Google Code's Prettify which is used by StackOverflow to color code-snippets. It has it's own stylesheets that it automatically imports based on what language it thinks the code is and colors the code accordingly. You can give it a hint as to what language the code is by appending a class.