Numbered Code Listing Experiment

The CSS:

  1. ol.codeListing {
  2. font-family: monospace;
  3. color: green;
  4. background-color: #fff;
  5. list-style-type: decimal-leading-zero;
  6. list-style-position: inside;
  7. width: 80%;
  8. }
  10. ol.codeListing li {
  11. background-color: #eee;
  12. margin: 2px;
  13. }
  15. ol.codeListing li code {
  16. color: black;
  17. white-space: pre;
  18. margin-left: 1em;
  19. }
  21. /* Hack to get Konqueror 3.0 to display blank lines without crunching them up,
  22. courtesy of Jim Dabell. Alternatively use <li><code>&nbsp;</code></li> */
  23. ol.codeListing li code:before {
  24. content: "";
  25. }

Example XHTML:

  1. <ol class="codeListing">
  2. <li><code>ol.codeListing {</code></li>
  3. <li><code> font-family: monospace;</code></li>
  4. <li><code> color: green;</code></li>
  5. <li><code> background-color: #fff;</code></li>
  6. <li><code> list-style-type: decimal-leading-zero;</code></li>
  7. <li><code> list-style-position: inside;</code></li>
  8. <li><code> width: 80%;</code></li>
  9. <li><code>}</code></li>
  10. </ol>

Created by Simon Willison, 10th July 2002. Original inspiration Dan Loda. Copy at will.