SO's question box and preview

StackOverflow https://stackoverflow.com/questions/1124222

  •  13-09-2019
  •  | 
  •  

Question

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?

Was it helpful?

Solution

The editor code comes from these JS files:

The source for these files is the StackOverflow fork of the WMD editor which can be viewed here: http://github.com/derobins/wmd/tree/master

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top