mozilla

Revision 327839 of TestCodeSample

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

Revision Content

<h2 id="Playing_with_code_samples">Playing with code samples</h2>
<p>This page is a playground for code samples</p>
<div id="Sample">
  <p>Here's some HTML for you! (HTML hidden in a div to test something, by teoli)</p>
  <div style="display:none;">
    <pre class="brush: html">
&lt;p id="thingy" class="make-me-blue"&gt;Hello world, I should be blue!&lt;/p&gt;</pre>
  </div>
  <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>
</div>
<h3 id="And_that's_it!">And that's it!</h3>
<p>Here's the embedded sample (<a href="{{ LiveSampleURL('Sample_1') }}" target="_blank">direct link</a>):</p>
<p>{{ EmbedLiveSample('Sample') }}</p>
 

Revision Source

<p>&lt;h2 id="Playing_with_code_samples"&gt;Playing with code samples&lt;/h2&gt;<br />
  &lt;p&gt;This page is a playground for code samples&lt;/p&gt;<br />
  &lt;div id="Sample"&gt;<br />
  &nbsp; &lt;p&gt;Here's some HTML for you! (HTML hidden in a div to test something, by teoli)&lt;/p&gt;<br />
  &nbsp; &lt;div style="display:none;"&gt;<br />
  &nbsp;&nbsp;&nbsp; &lt;pre class="brush: html"&gt;<br />
  &amp;lt;p id="thingy" class="make-me-blue"&amp;gt;Hello world, I should be blue!&amp;lt;/p&amp;gt;&lt;/pre&gt;<br />
  &nbsp; &lt;/div&gt;<br />
  &nbsp; &lt;p&gt;Here's some CSS for you!&lt;/p&gt;<br />
  &nbsp; &lt;pre class="brush: css"&gt;<br />
  /* This is terrible CSS. */<br />
  .make-me-blue { color: blue; }&lt;/pre&gt;<br />
  &nbsp; &lt;p&gt;Here's some JS for you!&lt;/p&gt;<br />
  &nbsp; &lt;pre class="brush: js"&gt;<br />
  // This is really bad code.<br />
  var el = document.getElementById('thingy');<br />
  el.innerHTML = el.innerHTML.replace('should be', 'am right now');&lt;/pre&gt;<br />
  &nbsp; &lt;p&gt;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.&lt;/p&gt;<br />
  &lt;/div&gt;<br />
  &lt;h3 id="And_that's_it!"&gt;And that's it!&lt;/h3&gt;<br />
  &lt;p&gt;Here's the embedded sample (&lt;a href="{{ LiveSampleURL('Sample_1') }}" target="_blank"&gt;direct link&lt;/a&gt;):&lt;/p&gt;<br />
  &lt;p&gt;{{ EmbedLiveSample('Sample') }}&lt;/p&gt;<br />
  &nbsp;</p>
Revert to this revision