Swatch:modern code
From CSS Swatches
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>
Contents |
[edit] Syntax
[edit] Declaration block
.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+ */
}
[edit] Inline
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;"
[edit] Sample
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.
