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. }
  9. ol.codeListing li {
  10. background-color: #eee;
  11. margin: 2px;
  12. }
  13. ol.codeListing li code {
  14. color: black;
  15. white-space: pre;
  16. margin-left: 1em;
  17. }
  18. /* Hack to get Konqueror 3.0 to display blank lines without crunching them up,
  19. courtesy of Jim Dabell. Alternatively use <li><code>&nbsp;</code></li> */
  20. ol.codeListing li code:before {
  21. content: "";
  22. }

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.