TestCodeSample

  • Revision slug: User:lmorchard/TestCodeSample
  • Revision title: TestCodeSample
  • Revision id: 328467
  • Created:
  • Creator: lmorchard
  • Is current revision? No
  • Comment

Revision Content

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):

{{ EmbedLiveSample('Playing_with_code_samples') }}

Another code sample

This is another, separate code sample:

<b>Goodbye world</b>

{{ EmbedLiveSample('Another_code_sample') }}

Revision Source

<h2 id="Introductory_text">Introductory text</h2>
<p>This is not a part of the code sample.</p>
<h2 id="Playing_with_code_samples">Playing with code samples</h2>
<p>This page is a playground for code samples</p>
<p>Here's some HTML for you!</p>
<pre class="brush: html">
&lt;p id="thingy" class="make-me-blue"&gt;Hello world, I should be blue!&lt;/p&gt;</pre>
<p>Here's some CSS for you!</p>
<pre class="brush: css">
/* This is terrible CSS. */
.make-me-blue { color: blue; }</pre>
<p>Here's some JS for you!</p>
<pre class="brush: js">
// This is really bad code.
var el = document.getElementById('thingy'); 
el.innerHTML = el.innerHTML.replace('should be', 'am right now');</pre>
<p>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.</p>
<h2 id="Including_the_sample_in_an_iframe">Including the sample in an iframe</h2>
<p>Here's the embedded sample (<a href="{{ LiveSampleURL('Playing_with_code_samples') }}" target="_blank">direct link</a>):</p>
<p>{{ EmbedLiveSample('Playing_with_code_samples') }}</p>
<h2 id="Another_code_sample">Another code sample</h2>
<p>This is another, separate code sample:</p>
<pre class="brush:html;">
&lt;b&gt;Goodbye world&lt;/b&gt;</pre>
<p>{{ EmbedLiveSample('Another_code_sample') }}</p>
Revert to this revision