Sample Code and Pre-formatted Code Output

One particular HTML element that has been taking up way too much of my time lately is the <code> tag. Different browsers will render the contents of this tag differently depending on how the CSS properties (such as line-height, font, and/or font-size) are declared.

It is a constant battle to ensure that elements will render correctly, and even when you think you’ve gotten everything worked out perfectly, you may find that Safari, for instance, doesn’t know what to do with an unordered list of encoded text:

  • Safari
  • may not
  • render this
  • worth a damn

And even when you’ve gotten all that figured out, you still have to ensure that the <pre> tag is styled properly and renders consistently across a wide range of modern browsers.

code {
	font-family: Consolas, Monaco, Courier, sans-serif;
	font-size: 14px;
	line-height: 1em;
	color: #050;
2 comments… add one
  • Test User Aug 31, 2013 @ 14:58

    Just seeing what the comments look like.

    • Maulsoft Oct 17, 2015 @ 18:24

      Just seeing what the reply looks like

Leave a Reply

Your email address will not be published. Required fields are marked *