<code> vs <pre> vs <samp> for inline and block code snippets?

Question

My site is going to have some inline code ("when using the `foo()` function...") and some block snippets. These tend to be XML, and have very long lines which I prefer the browser to wrap (i.e., I don't want to use `<pre>`). I'd also like to put CSS formatting on the block snippets.It seems that I can't use `<code>` for both, because if I put CSS block attributes on it (with `display: block;`), it will break the inline snippets.I'm curious what people do. Use `<code>` for blocks, and `<samp>` for inline? Use `<code><blockquote>` or something similar?I'd like to keep the actual HTML as simple as possible, avoiding classes, as other users will be maintaining it.

Answer 1

Hi,

I would need some examples of what you are trying to do in order to fully answer your questions. However I will attempt to address the issue with using the pre tag. You can style the pre tag so that it will auto wrap your code.

For instance you can apply the follow style and it will cause your css to wrap:

pre {

white-space: pre-wrap;

padding: 0 5px 0 5px;

}

Another way to represent xml is to use the textarea tag. The pro is that you don't have to convert your xml to entity code and it will wrap automatically and maintain the structure. Then you can style the textarea. The con is that you are not able to color code your syntax that way.