How do you get code to display indented on sites like this? Options

[Terminator]

I know that on this site you have to type "code" in brackets to display code in the forum like below, but how does it keep it indented like that?

Why does it show up nice and indented like this:

CODE

if (x == 100)
{
   cout << "x is ";
   cout << x;
}

and not like this:

if (x == 100)
{
cout << "x is ";
cout << x;
}

What do you add to CSS to do that? To make it all nice and indented in all the right spots?

Don't worry I am not making an HTML forum, haha. I just want to know how to display code examples on a web page, thanks.

[Terminator]

Oops, I guess this post belongs in the CSS section, sorry.

[pandy]

Now it is in the CSS section.

Well, this forum does it by using a lot of &nbsp#59; , nothing I would mimic. You could do it with margin, padding or with text-indent, even if the latter isn't very well suited because it applies to block level elements and with the first two you'd need to wrap each indented line in something. You could use CODE which would make that less bad.

Or you could just use PRE. Maybe I shouldn't have moved the thread after all?
http://www.htmlhelp.com/reference/html40/block/pre.html

[Christian J]

The PRE element combined with CODE is probably the best choice, since it both gives you the whitespace formatting and semantic meaning.

But you can also style ordinary HTML with CSS "white-space: pre":
http://www.w3.org/TR/CSS21/text.html#propdef-white-space
http://www.w3.org/TR/css3-text/#white-space

[Terminator]

Thanks guys, PRE combined with CODE is def it. Then I can style code if I want to make it have a different background color, borders, etc.

[pandy]

You probably want to do that with PRE instead. PRE will be the outer element that contains CODE, so for starters it's more natural this way. CODE is an inline element so borders and background will be pained very differently than when used with a block level element like PRE. The background will look like you've used a highlighter pen, the color will just cover the lines, follow the text, not paint the whole box. The horizontal parts of the border will follow each line but the vertical parts will be at the very beginning and the very end. The whole text is seen as a long line, even if broken, and that's the box the border follows. So if you aren't after that special effect, go for styling PRE.

You can see the difference by doing both. Actually it looks quite funny.

CODE

pre    { background: #eee; border: 3px solid #00f }
code   { background: #ff0; border: 3px solid #f00 }

CODE

<pre>
<code>
if (x == 100)
{
   cout << "x is ";
   cout << x;
}
</code>
</pre>


<pre>
<code>if (x == 100)
{
   cout << "x is ";
   cout << x;
}</code>
</pre>

I used two sets of PRE above to show you that linebreaks in the markup between the text and the CODE tags get preformatted too. So you may want to shove the code tags and the text together as in the second example.

[Terminator]

Thanks, I will just style PRE, and I can use classes if I want slightly different background colors for HTML and C++ examples. You are right, styling CODE does look weird.

[Terminator]

Have some follow up questions.

If I wanted to change colors of certain lines/words within the code, or even just make the brackets red, do you think styling with span as I put below would be the best option? These are code examples that I would be typing myself on a webpage, not on a forum that other people would be typing. So I would need to add these span codes manually each time I want to change colors, like for comments, or insertion operators, etc.

CODE

<span class ="green">// comments....</span>

if (x == 100)
<span class ="red">{</span>
   cout << "x is ";
   cout << x;
<span class ="red">}</span>

And then what about setting a max width for these for when it is real small amounts of code like above? Rather than stretch out the entire page length?

Do you think something like max-width: 300px; for the small code block examples would be a good idea? That would still look good on mobile devices because 300px would fill up the page on portrait. I think using percentage for width would not be a good idea due to mobile.

thanks.

This post has been edited by Terminator: Jul 11 2015, 11:12 PM

[pandy]

Yeah, SPAN would work or you could use CODE again if you prefer.

Yeah, use width or maxwidth. If you use em as the unit you could even get it close to the width of the code. You could also float the code blocks (PRE) to make them shrinkwrap.

[Christian J]

If I wanted to change colors of certain lines/words within the code, or even just make the brackets red, do you think styling with span as I put below would be the best option?

Yes the HTML5 spec recommends using SPAN for that: http://www.w3.org/TR/html5/text-level-sema...he-span-element

You could use CLASS values that describe the SPAN element's function rather than its appearance, like

CODE

span.bracket {color: red;}

instead of

CODE

span.red {color: red;}

That way future maintenance should become easier. For example, if you sometime want to change the color of the brackets from red to green, it might be confusing to keep the ".red" class value:

CODE

span.red {color: green;}

[Terminator]

You could use CLASS values that describe the SPAN element's function rather than its appearance, like

CODE

span.bracket {color: red;}

instead of

CODE

span.red {color: red;}

That way future maintenance should become easier. For example, if you sometime want to change the color of the brackets from red to green, it might be confusing to keep the ".red" class value:

CODE

span.red {color: green;}

Good idea, I actually do it that way. I just put "red" on the post to make it easier for people to see what I was doing.