html - 如何制作带编号的段落 (HTML5/CSS3)

Question

我正在编写 HTML5 中的 QuickBASIC 4.5 指南，并且我已经使用了很多它，但我想知道如何对我的代码行进行编号(或停止文本换行)。现在，我的代码如下所示:

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%) + "?"

所以你看到当你滚动那里的代码时，它如何提供一个滚动条？我想要那个，但我还需要知道如何使编号自动进行。现在它在我的

中。看:

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

我希望能够做一些事情，也许在 CSS 部分，提供滚动，最好是数字。如果你能解决任何一个问题，请告诉我。我还查看了 CSS3，发现 text-wrap 属性还没有在任何主流浏览器上使用(目前)，所以也许我不能那样做，但是然后再次滚动只会对此有所帮助。 :P

---

如果有人想知道，这里是代码类的 CSS 代码:

 .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

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