Advanced Search

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.

Expand | Embed | Plain Text

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.