How do I make numbered paragraphs (HTML5/CSS3)

Question

I'm working on a QuickBASIC 4.5 guide in HTML5, and I've been getting a bunch of it working, but I want to know how I can number (or stop text-wrapping) my lines of code. For now, my code looks like this:

1. PRINT "Hello World!"
2. INPUT "Who are you? ", myName$
3. PRINT "Hello, " + myName$
4-7. (Stuff)
8. PRINT "Did you know that " + STR$(num1%) + " + " + STR$(num2%) + " = " + STR(total%) + "?"

So you see how when you scroll over the code there, it gives a scroller? I want to have that, but also I need to know how to make the numbering automatic.. right now it's in my < p >'s.. look:

<p class="code">1. PRINT "Hello World!" <br />
2. INPUT "Who are you? ", myName$ <br />
(...)</p>

I want to be able to do something, maybe in the CSS section, that gives scrolling and preferably the numbers. If you can get either one solved, just tell me.. I also looked on CSS3 and saw that the text-wrap property isn't used on any of the major browsers (yet), so maybe I can't do that, but then again the scrolling would just help with that. :P

---

Just if anybody wants to know, here's the CSS code for the code class:

 .code {
    font-family: Courier;
    margin-left: 35px;
    margin-right: 35px;
    background: #F0EFE9;
    border-style: inset;
    border-width: 5px;
    resize: vertical;
    overflow: auto;
    cursor: context-menu;
    /*text-wrap: none;*/ /* This doesn't work.. */

Answer 1

You can do this using ordered list .

See this link http://www.w3schools.com/html/html_lists.asp.

<ol> <li><p>hello world </p></li> </ol>

Answer 2

an <ol> element will work instead of a url. By default an <ol> shows the numbers of the list items as a pose to the <ul> element etc

<ol>
<li> PRINT "Hello World!" </li>
<li>INPUT "Who are you? ", myName</li>
</ol>

Answer 3

<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>
<p>Paragraph </p>

<style type="text/css">
body {
  counter-reset: section;      
}
p:before {
  counter-increment: section;        
  content: "" counter(section) ": "; 
}
</style>