Noob: Code & Pre tags...

[Mike]

I'm having issues. I'm attempting to use <code> and <pre> properly, and
I'm confused. I have to assume that <code> is intended to provide
context, as well as a kind of formatting. However the formatting leaves
something to be desired. It doesn't seem to do much beyond using a
monospace font. It doesn't preserve spacing or line breaks. So, I
learned about using <pre> to keep things neat. But it leaves me
wondering why a tag named "code" is kinda code-snippet-unfriendly? What
am I not getting?

Now given that I want to use <pre>, I nest them together. It appears
that when nesting like so:

<pre>
<code>
..stuff..
</code>
</pre>

...the snippet is surounded by additional line breaks, which I have to
assume is because the <pre> is immediately followed by a line break,
and preserves it? Thus the solution is to do it like so:

<pre><code>
...stuff...
</code></pre>

Experiments with different browsers and editors-with-previews seem to
reinforce this. Is this normal practice?

To add insult to injury: I styled <pre> so that snippets would be
surrounded by borders and had different spacing and size. Looks great.
Really simple stuff. Contrariwise, the same changes to <code> resulted
in a disaster. This leads me to believe that <code> is handled in some
complicated way by browsers. Shouldn't it be mainly a font change?

pre{
width:100%;
padding:1em 0;
overflow:auto;
border-top:1px dotted #333;
border-bottom:1px dotted #333;
}

Thanks, and if you have a recommendation for an antidepressant I could use it.
Mike

[Toby Inkster]

Mike wrote:

> To add insult to injury: I styled <pre> so that snippets would be
> surrounded by borders and had different spacing and size. Looks great.
> Really simple stuff. Contrariwise, the same changes to <code> resulted
> in a disaster.

That's because CODE is inline and PRE is block.

For big blocks of code, it's a good idea to use:

<pre><code>
...
</code></pre>

as you've discovered. But if you want to include a tiny bit of code
mid-paragraph, just <code>...</code> will do nicely. For example:

http://tobyinkster.co.uk/web-abbr

If you are marking up code in several different languages, you may find it
useful to use classes, e.g.:

<code class="html">&lt;BODY&gt;</code>
<code class="css">margin-left: 1em;</code>
<code class="perl">$_++</code>

More fun:
http://test.tobyinkster.co.uk/Preview/Syntax-Highlighting/test.php

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

[Mike]

On 2006-07-03 18:15:05 -0400, Toby Inkster
<usenet...@tobyinkster.co.uk> said:

Thanks! Nice site, btw.

[Mitja Trampus]

Toby Inkster wrote:
> Mike wrote:
>
>> To add insult to injury: I styled <pre> so that snippets would be
>> surrounded by borders and had different spacing and size. Looks great.
>> Really simple stuff. Contrariwise, the same changes to <code> resulted
>> in a disaster.
>
> That's because CODE is inline and PRE is block.
> For big blocks of code, it's a good idea to use:
> <pre><code> ... </code></pre>

One more alternative:
Since PRE has no semantic meaning, I prefer to use

<code class="snippet"> ... </code>

in combination with

code.snippet {
display: block;
white-space: pre;
}

[Jukka K. Korpela]

Mitja Trampus <n...@example.com> scripsit:

> Since PRE has no semantic meaning, I prefer to use
>
> <code class="snippet"> ... </code>
>
> in combination with
>
> code.snippet {
> display: block;
> white-space: pre;
> }

The PRE element has a meaning: it indicates a block of preformatted text.
(And it is a semantic meaning. "Semantic" means "relating to meaning", so
"semantic meaning" is just an emphatic expression for "meaning".)

On the practical side, your approach implies that in any non-CSS rendering
situation, the entire code snippet is rendered as running text, without
preserving whitespace. Besides, there will be problems in CSS-enabled
rendering, too, since support to white-space: pre is not universal.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Andy Dingley <dingbat@codesmiths.com>]

Jukka K. Korpela wrote:

> The PRE element has a meaning: it indicates a block of preformatted text.
> (And it is a semantic meaning. "Semantic" means "relating to meaning", so
> "semantic meaning" is just an emphatic expression for "meaning".)

If you're taking things that far, <pre> has a semantic meaning, but
<code> has a pragmatic meaning, at a level of abstraction above this.

[Toby Inkster]

Mitja Trampus wrote:

> code.snippet {
> display: block;
> white-space: pre;
> }

This is a bad idea. Think of non-CSS browsers.

(As it happens I do often use "display:block" on <code> elements, but
that's just to get the background colour to spread out nicely -- I still
use <pre>...</pre> for white space control.)