This question is based on this thread in Meta.
I would like to have an offline access to SO's editor and to its preview such that I can type fast.
Editor
I found the following HTML of the question box.
<div class="resizable-textarea" id="wmd-container">
<div id="wmd-button-bar"><ul id="wmd-button-row"><li class="wmd-button" id="wmd-bold-button" title="Strong <strong> Ctrl+B" style="background-position: 0px 0px;"/><li class="wmd-button" id="wmd-italic-button" title="Emphasis <em> Ctrl+I" style="background-position: -20px 0px;"/><li class="wmd-spacer" id="wmd-spacer1"/><li class="wmd-button" id="wmd-link-button" title="Hyperlink <a> Ctrl+L" style="background-position: -40px 0px;"/><li class="wmd-button" id="wmd-quote-button" title="Blockquote <blockquote> Ctrl+Q" style="background-position: -60px 0px;"/><li class="wmd-button" id="wmd-code-button" title="Code Sample <pre><code> Ctrl+K" style="background-position: -80px 0px;"/><li class="wmd-button" id="wmd-image-button" title="Image <img> Ctrl+G" style="background-position: -100px 0px;"/><li class="wmd-spacer" id="wmd-spacer2"/><li class="wmd-button" id="wmd-olist-button" title="Numbered List <ol> Ctrl+O" style="background-position: -120px 0px;"/><li class="wmd-button" id="wmd-ulist-button" title="Bulleted List <ul> Ctrl+U" style="background-position: -140px 0px;"/><li class="wmd-button" id="wmd-heading-button" title="Heading <h1>/<h2> Ctrl+H" style="background-position: -160px 0px;"/><li class="wmd-button" id="wmd-hr-button" title="Horizontal Rule <hr> Ctrl+R" style="background-position: -180px 0px;"/><li class="wmd-spacer" id="wmd-spacer3"/><li class="wmd-button" id="wmd-undo-button" title="Undo - Ctrl+Z" style="background-position: -200px 0px;"/><li class="wmd-button" id="wmd-redo-button" title="Redo - Ctrl+Shift+Z" style="background-position: -220px -20px;"/><li class="wmd-button" id="wmd-help-button" style="background-position: -240px 0px;"><a href="/editing-help" target="_blank" title="Markdown Editing Help"/></li></ul></div>
<textarea tabindex="101" rows="15" cols="92" name="post-text" id="wmd-input" class="processed"/>
<span class="form-error"/>
<div class="grippie" style="margin-right: 79px;"/></div>
CSS
#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%;
}
Preview
HTML
<div id="wnd-preview">
CSS
#wmd-preview {
background-color:#E0EAF1;
border:2px dotted #FFFFFF;
clear:both;
font-size:107%;
line-height:130%;
margin-top:14px;
padding:3px;
width:660px;
}
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 8.
In short, how is the JS of SO's question box and preview built?