3

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 :>

Improve this question
4
  • If you'd make an attempt, or ask a specific question, I'd be glad to help you fix your problems, but asking 'can you guys build me this?' probably won't get you very far. Why is a 'code box' not just a box with formatted text? It has text coloring, according to the proper language. So you'll need a parser for that. Commented Apr 26, 2011 at 16:21
  • What specifically are you having trouble with? Commented Apr 26, 2011 at 16:28
  • well everything, only thing i've managed to do is an ordered list with dashed border, and then reduce the margin to 2px, and then change the colour, the box looks fine then, but the numbers are inside the box and also I can't give it any text light, I'm just starting xhtml and css so my skills ain't that great, fe. I have no idea how to make it so that some words are in specified color... => Commented Apr 26, 2011 at 16:33
  • A friendly comment: In your question, you said "with xhtml or css". You can make a web page with just xhtml but you can't make a webpage with just css. You should consider rephrasing your question (yes, it's minor, but it still stands out). :) Commented Apr 26, 2011 at 18:54

3 Answers 3

Reset to default
11

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!

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

Shortened the code from https://stackoverflow.com/a/5794241/4829915 and made it have an auto width:

.codebox {
        border:1px solid black;
        background-color:#EEEEFF;
        white-space: pre-line;
        padding:10px;
        font-size:0.9em;
        display: inline-block;
}
    <code class="codebox">
        var message = "hello world!";
        alert(message);
    </code>

Improve this answer

Comments

0

I want to thank to this post to help me and here is how I make code box

<style>xmp:before {
  content: counter(line);
  counter-increment: line;
}

pre {
  white-space: nowrap;
  counter-reset: line;
  min-height: 350px;
  background: #222222;
  padding: 15px;
  color: #ffffff;
  overflow: scroll
}

</style>
python
<pre>
<code><xmp>x="hello world"</xmp></code>
<code><xmp>print (x)</xmp></code>
</pre>

Improve this answer

1 Comment

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.