derobins / wmd
watch download tarball
public
Forks4Right
Watchers141Right
Fork of cky/wmd
Description: Stack Overflow branch of WMD.
Homepage: http://blog.stackoverflow.com/2008/12/reverse-engineering-the-wmd-editor/
Clone URL: git://github.com/derobins/wmd.git 
Added another bug for underscores in image URLs.
derobins (author)
Mon Mar 02 13:15:56 -0800 2009
commit  980f68797307d28f0541868c740974cb2eeb1209
tree    99d52b4d6e9e1e8ce3d6aa804cb7cad030048ed3
parent  7b91140ef8b59eacd18eb1099b9e2fb72e1e6b24
wmd /
readme.txt
** NOTE **
*******************************************************************************

This is a branch of the original WMD for Stackoverflow.  A LOT of functionality
was removed as we did not need it.  Most of the customization and options are
NOT in this version.  If you want that functionality, you'll have to wait for
the next version (WMD 3).

*******************************************************************************
*******************************************************************************

Installing WMD
--------------

1. Add the CSS stylesheet to your head and/or merge the styles in with your
   own stylesheet.  All the styles I've added start with wmd- so there
   are unlikely to be conflicts with your CSS classes.

  <link rel="stylesheet" type="text/css" href="wmd.css" />

2. Add showdown.js (the markdown converter) to your head:

  <script type="text/javascript" src="showdown.js"></script>

3. Add wmd.js right before your closing body tag:

  <script type="text/javascript" src="wmd/wmd.js"></script>

4. Put the wmd-buttons.png someplace.  You can modify this image if you don't
   like the visual look.  The .psd file contains easily-edited layers.  Changing
   the size of the buttons might cause problems where you have to edit the wmd
   source.  Please message me on github (link below) if this sucks for you so
   I can improve support for various button sizes.

5. Pop open the source to change the variables at the top that require
   changing (image paths, dialogs, etc.).

6. I'd minify the source.  It'll get a LOT smaller.  Eventually I'll provide a
   minified version.
   
  
 
You need to create:
-------------------

0. For all of these, I use the CSS class "wmd-panel" but this isn't required.
   The ids given below are very important as the wmd code uses them to find
   the panels.

1. A button bar div

    This will contain WMD's buttons.  id is "wmd-button-bar".

2. An input textarea

    This is where you'll enter markdown.  id is "wmd-input".

3. A preview div (optional but recommended)

    This will give you a live preview of your markdown.  id is "wmd-preview".

4. An HTML preview div (optional and you probably don't need this)

    This will show the raw HTML that the markdown will produce.  Not so
    useful for most web pages but useful for troubleshooting WMD :)  id 
    is "wmd-output".

Example:

  <!DOCTYPE html>
  <html>
    <head>
      <title>Test WMD Page</title>
      <link rel="stylesheet" type="text/css" href="wmd.css" />
      <script type="text/javascript" src="showdown.js"></script>
    </head>
  
    <body>
    
      <div id="wmd-button-bar" class="wmd-panel"></div>
      <br/>
      <textarea id="wmd-input" class="wmd-panel"></textarea>
      <br/>
      <div id="wmd-preview" class="wmd-panel"></div>
      <br/>
      <div id="wmd-output" class="wmd-panel"></div>  
    

      <script type="text/javascript" src="wmd.js"></script>
    </body>
  </html>

Support
-------

If you're having trouble getting WMD up and running, feel free to 
message me on github: http://github.com/derobins