Question

How do I make a code box for programming languages on my website, with xhtml or css?

http://www.cplusplus.com/doc/tutorial/functions2/

I’m trying to do boxes similiar to those?

E: Okay since people asking, I’m not really good at css/html, but I’m really into learning it, and like I already mentioned in the comments, I’ve only managed to do an ordered list with lightgray bg color and darkgray dashed 1 (or 2) px border, and then margin to around 2px. Then I’ll get the line numbers, and a cool looking box, but it’s nothing as advanced as the thing on cplusplus.com, and that’s what I’d like to learn :>

Answer 1

To be completely honest, it will be very difficult for you to replicate a code box like that on CplusPlus.com.

While it is easy to do the basic things (font style, styling the coded box), it is really challenging to create a decent syntax highlighting script (usually done in JavaScript, but sometimes in a server side language like PHP).

So below I have posted some code that will create a decent “code box” with plain code in it (no syntax highlighting, and no line numbers). While it’s simple, I think it will be a great start to get you going.

---

A quick note: If you want text highlighting functionality, I suggest you use a pre-made code highlighting script (such as SyntaxHighlighter, which I highly recommend) or a pre-made formatted code editing script (like CodePress).

    .codebox {
        /* Below are styles for the codebox (not the code itself) */
        border:1px solid black;
        background-color:#EEEEFF;
        width:300px;
        overflow:auto;    
        padding:10px;
    }
    .codebox code {
        /* Styles in here affect the text of the codebox */
        font-size:0.9em;
        /* You could also put all sorts of styling here, like different font, color, underline, etc. for the code. */
    }

    <div class="codebox">
        <code>   
            var message = "hello world!";
            alert(message);
        </code>
    </div>

And that’s it! A simple “code box” with some sample JavaScript code in it. You can expand your horizons from there 🙂

Good luck!