Stupid Code Block Trick Re: We Stylin'!

I've grown fond of having code blocks highlighted at other sites, and now I can do it here. Currently, CODE blocks that aren't inline get <pre><tt>...</tt></pre> wrapped, while inline ones get <tt>...</tt> (no pre's). Thus, I've got this in my CSS:

PRE { 
      background-color: #FFFF80;
      border: thin black solid;
      padding: 5px;
    }
[download]

Now all my code blocks show up as boxed text on light yellow, nice and easy to follow between text and code.

-----------------------------------------------------
Dr. Michael K. Neylon - mneylon-pm@masemware.com || "You've left the lens cap of your mind on again, Pinky" - The Brain
"I can see my house from here!"
It's not what you know, but knowing how to find it if you don't know that's important

Comment on Stupid Code Block Trick Re: We Stylin'! Select or Download Code

Replies are listed 'Best First'.

Re: Stupid Code Block Trick Re: We Stylin'!
by mdillon (Priest) on Feb 14, 2002 at 03:02 UTC

body
{
        margin: 0px;
        font-family: sans-serif;
}

pre, tt
{
        font-family: monospace;
}

a
{
        text-decoration: none;
}

a:hover
{
        background-color: cyan; color: #333;
}

pre > tt
{
        display: block;
        color: green;
        background-color: #333;
        border: solid #888 1px;
        padding: 10px;
        width: 90%;
        margin-right: 0px;
        margin-left: auto;
}

input[type=submit], input[type=text], input[type=checkbox], input[type
+=radio],
        select, textarea
{
        border: solid #333 1px;
}

input[type=submit], input[type=text]
{
        margin: 4px;
}
[download]

<pre>

<pre><tt>

<tt>

<pre>

<tt>

display: block;

This code still suffers from the problem of mis-styling a <tt> used inside <pre> in cases like: <pre>blah blah blah, <tt>Typewriter</tt> <strong>power</strong></pre> (I know, It's contrived). However, this is because CSS can't select (or disallow) so-called "anonymous" elements (i.e. text chunks).

Or, you can just do it your way, which is fine.

Update: since I was having problems with the Everything Engine messing with my square and pointy brackets, I moved my CSS into an external file. I have updated the code block to reflect my latest CSS.

[reply]
[d/l]
[select]


Problems? Is your data what you think it is?
	PerlMonks