Currently, I am putting together a QuickBASIC 4.5 manual in HTML5 and have made progress with it. However, I am looking for a way to add line numbers or prevent text wrapping in my code snippets. The current format of my code is as follows:
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%) + "?"
As you can see, when scrolling over the code, it includes a scroller. I would like to maintain this feature while also figuring out how to automatically assign numbers to the lines. Currently, the numbering appears within the < p > tags:
<p class="code">1. PRINT "Hello World!" <br />
2. INPUT "Who are you? ", myName$ <br />
(...)</p>
I am wondering if there is something I need to implement, possibly in the CSS section, to enable both scrolling and automatic numbering. If you can solve either issue, please let me know. I have researched CSS3 and found that the text-wrap property isn't supported by major browsers yet, so I may not be able to use that. Nonetheless, having scrolling capabilities would likely address that concern.
For those curious, here is 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.. */
}