FANDOM


modern code

class name: .modern_code

author: tatwell

added: 8 Sep 2006

This swatch is designed for displaying sample html or programming code on this wiki. (To display CSS code, please see the CSS sample swatch.) It is based on the .code class designed by tatwell and first introduced on his blog.[1] Please apply this swatch inline to any sample HTML code you include on this site.

Note: for proper code display, it may require the strategic bracketing of nowiki tags. Like so:

<div style="margin-bottom:0px; padding:0 1em; font-size:.9em; font-family:'Lucida Console',Monaco,monospace; font-weight:normal; color:#008800; background:#eee; border: 1px solid #ccc; white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; _white-space: pre; word-wrap: break-word;"> <nowiki> YOUR CODE HERE </nowiki> </div>

SyntaxEdit

Declaration blockEdit

.modern_code
{
margin-bottom:0px;
padding:0 1em;
font-size:.9em;
font-family:"Lucida Console",Monaco,monospace;
font-weight:normal;
color:#008800;
background:#eee;
border: 1px solid #ccc;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
_white-space: pre; word-wrap: break-word; /* Internet Explorer 5.5+ */
}

InlineEdit

style="margin-bottom:0px; padding:0 1em; font-size:.9em; font-family:'Lucida Console',Monaco,monospace; font-weight:normal; color:#008800; background:#eee; border: 1px solid #ccc; white-space: pre-wrap;   white-space: -moz-pre-wrap;   white-space: -pre-wrap;   white-space: -o-pre-wrap;   _white-space: pre; word-wrap: break-word;"

SampleEdit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

ReferencesEdit

  1. http://phosphorusandlime.blogspot.com/2006/08/css-referencequotation-styles-updated.html