title: SO's question box and preview
body: <p>This question is based on this <a href="https://meta.stackexchange.com/questions/4939/apparent-bug-in-sos-javascript-for-the-question-box">thread in Meta</a>.</p>
  
  <p>I would like to have an offline access to SO's editor and to its preview such that I can type fast.</p>
  
  <h2>Editor</h2>
  
  <p>I found the following <strong>HTML</strong> of the question box.</p>
  
  <pre><code>&lt;div class="resizable-textarea" id="wmd-container"&gt;
          &lt;div id="wmd-button-bar"&gt;&lt;ul id="wmd-button-row"&gt;&lt;li class="wmd-button" id="wmd-bold-button" title="Strong &lt;strong&gt; Ctrl+B" style="background-position: 0px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-italic-button" title="Emphasis &lt;em&gt; Ctrl+I" style="background-position: -20px 0px;"/&gt;&lt;li class="wmd-spacer" id="wmd-spacer1"/&gt;&lt;li class="wmd-button" id="wmd-link-button" title="Hyperlink &lt;a&gt; Ctrl+L" style="background-position: -40px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-quote-button" title="Blockquote &lt;blockquote&gt; Ctrl+Q" style="background-position: -60px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-code-button" title="Code Sample &lt;pre&gt;&lt;code&gt; Ctrl+K" style="background-position: -80px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-image-button" title="Image &lt;img&gt; Ctrl+G" style="background-position: -100px 0px;"/&gt;&lt;li class="wmd-spacer" id="wmd-spacer2"/&gt;&lt;li class="wmd-button" id="wmd-olist-button" title="Numbered List &lt;ol&gt; Ctrl+O" style="background-position: -120px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-ulist-button" title="Bulleted List &lt;ul&gt; Ctrl+U" style="background-position: -140px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-heading-button" title="Heading &lt;h1&gt;/&lt;h2&gt; Ctrl+H" style="background-position: -160px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-hr-button" title="Horizontal Rule &lt;hr&gt; Ctrl+R" style="background-position: -180px 0px;"/&gt;&lt;li class="wmd-spacer" id="wmd-spacer3"/&gt;&lt;li class="wmd-button" id="wmd-undo-button" title="Undo - Ctrl+Z" style="background-position: -200px 0px;"/&gt;&lt;li class="wmd-button" id="wmd-redo-button" title="Redo - Ctrl+Shift+Z" style="background-position: -220px -20px;"/&gt;&lt;li class="wmd-button" id="wmd-help-button" style="background-position: -240px 0px;"&gt;&lt;a href="/editing-help" target="_blank" title="Markdown Editing Help"/&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
          &lt;textarea tabindex="101" rows="15" cols="92" name="post-text" id="wmd-input" class="processed"/&gt;
          &lt;span class="form-error"/&gt;
      &lt;div class="grippie" style="margin-right: 79px;"/&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wmd-input {
  height:240px;
  line-height:1.2;
  padding:3px;
  }
  
  textarea {
  border:1px solid #999999;
  font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
  font-size:90%;
  }
  </code></pre>
  
  <h2>Preview</h2>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="wnd-preview"&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#wmd-preview {
  background-color:#E0EAF1;
  border:2px dotted #FFFFFF;
  clear:both;
  font-size:107%;
  line-height:130%;
  margin-top:14px;
  padding:3px;
  width:660px;
  }
  </code></pre>
  
  <p>I am not sure how the JS -part is built. I did not find it from my Firebug. 
  It seems that the name of the function is <code>8</code>.</p>
  
  <p>In short, <strong>how is the JS of SO's question box and preview built?</strong></p>