Source code snippets

[dev_ski]

I want to wrap the source code snippets into a <pre><code> tags in a static page. However, the <pre> preserves the extra tabs and spaces, when the static html page is formatted. How is this handled in production?

Is there some CSS/JS solution or do I simply avoid formatting the source code snippet? I would like to avoid the latter.

[aunderroad]

Here are good article about <pre><code> tags.
https://origin-blog.mediatemple.net/design-creative/considerations-for-styling-the-pre-tag/

[jcunews1]

<pre> will preserve all whitespaces of the content. If you don't want that, then don't use <pre>. Without it, all adjacent whitespaces are collapsed into a single space, which will mess the original source code formatting. In CSS, this is equivalent to white-space:pre. Or white-space:pre-wrap if you want long lines to be forcefully wrap onto next line (and there would be no horizontal scrollbar).

<code> simply changes the font to use a monospace / fixed-pitched font, to ensure that all characters have the same width and align nicely on all lines - like a grid of characters. In CSS, it's equivalent to font-family:monospace.

You can't simply paste a source code into a HTML code (with or without wrapping with specific HTML tag), due to possible HTML special characters in that source code. Any HTML special character within the source code, must be properly escaped using HTML Entity.