black - code that doesn't need to be changed to make the enhancement work
green - very important comments explaining the operation of code, and further customisation that you can make. It explains code that is in the following three colours
red - either a variable value to change to customise your look, or code that you can play with to affect layout of items
blue - active lines that can be removed to remove functionality
pink - inactive lines that can be decommented to enable functionality
So, something like:
.comment{ color: #009900; } .variable { color: #993300; } .active { color: #333399; } .inactive{ color: #CC33CC; }
so then when creating a tutorial, users dont have to insert the colors themselves, just the class.
<span class="codeinactive">like so</span>
what do you think?
Edit: updated class names so they're easier to remember