MDN’s new design is in Beta! A sneak peek:


Introductory text

This is not a part of the code sample.

Playing with code samples

This page is a playground for code samples

Here's some HTML for you!

<p id="thingy" class="make-me-blue">Hello world, I should be blue!</p>

Here's some CSS for you!

/* This is terrible CSS. */
.make-me-blue { color: blue; }

Here's some JS for you!

// This is really bad code.
var el = document.getElementById('thingy'); 
el.innerHTML = el.innerHTML.replace('should be', 'am right now');

As long as there's a section with a code listing marked as HTML, CSS, and JS for syntax highlighting, you can have a live sample. They're all optional, but a sample with just CSS might not make much sense. I suppose you could generate markup in the DOM with JS, so you could have just a javascript code listing.

Including the sample in an iframe

Here's the embedded sample (direct link):

Another code sample

This is another, separate code sample:

<p>Blah blah blah</p>
<p><b>Goodbye world</b></p>
<p>The line above should be highlighted.</p>

Document Tags and Contributors

 Last updated by: lmorchard,