Styling HTML Code Blocks Using Only CSS & CSS Counters


/ Published in: CSS
Save to your folder(s)

Learn how to style the HTML code element with CSS using CSS counters. CSS counters are the CSS equivalent to variables. In my tutorial I use CSS counters to emulate line numbers for my code block.


Copy this code and paste it in your HTML
  1. <script type="text/javascript">
  2. //http://www.somacon.com/p355.php
  3. String.prototype.trim = function()
  4. {
  5. return this.replace(/^\s+|\s+$/g,"");
  6. }
  7.  
  8. //http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21478202.html
  9. function codeToList()
  10. {
  11. //Convert code elements to ordered lists
  12. var code = document.getElementsByTagName("code")
  13. for (i = 0; i < code.length; i++)
  14. {
  15. code[i].innerHTML = "<ol class='code'>" + code[i].innerHTML.replace(/\n/g, "<li>").trim() + "</ol>";
  16. } //end for
  17.  
  18. //Apply zebra stripes
  19. if (document.getElementsByClassName)
  20. {
  21. var code = document.getElementsByClassName("code");
  22. for (i = 0; i < code.length; i++)
  23. {
  24. var li = code[i].getElementsByTagName("li")
  25. var cn = "odd";
  26. for (x = 0; x < li.length; x++)
  27. {
  28. li[x].className = cn;
  29. cn == "odd" ? cn = "even" : cn = "odd"; //condition ? true : false
  30. } //end for
  31. } //end for
  32. } //end if
  33.  
  34. } //end function
  35.  
  36. window.onload = DOMReadyAll;
  37. function DOMReadyAll()
  38. {
  39. codeToList();
  40. }
  41. </script>
  42.  
  43. <style type="text/css">
  44. body { font-size: 12px; width: 600px; }
  45.  
  46. .code
  47. {
  48. background: url(/files/images/template/code_bg2.png) repeat left top;
  49. border: 1px solid #cccccc;
  50. list-style-type: none;
  51. margin: 0px;
  52. padding: 0px;
  53. overflow: auto;
  54. width: 550px;
  55. }
  56.  
  57. .code li
  58. {
  59. color: #669933;
  60. font-family: "Consolas", "Courier New", Courier, mono;
  61. line-height: 0px; /* to remove white border issue */
  62. white-space: pre;
  63. }
  64.  
  65. .code { counter-reset: li; }
  66. .code li:before
  67. {
  68. counter-increment: li;
  69. content: counter(li) ". ";
  70. background: #ececec;
  71. border-right: 1px solid #cccccc;
  72. color: #555555;
  73. display: inline-block;
  74. font-family: Arial, Helvetica, sans-serif;
  75. line-height: 30px; /* minumum line height = 24, smaller causes white border issue */
  76. margin-right: 20px;
  77. padding-right: 5px;
  78. text-align: right;
  79. width: 50px;
  80. }
  81.  
  82. /*
  83. .code li:nth-child(odd) { background: #ffffff; }
  84. .code li:nth-child(even) { background: #fafafa; }
  85. .code .odd { background: #ffffff; }
  86. .code .even { background: #fafafa; }
  87. */
  88. .code li:empty { display: none; }
  89. </style>

URL: http://www.nealgrosskopf.com/tech/thread.asp?pid=33

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.