GitHub - leotiger/wmd: Stack Overflow branch of WMD.

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 168 Commits
images		images
jQuery		jQuery
markdown 1.0.1		markdown 1.0.1
Uservoice bugs.txt		Uservoice bugs.txt
dual-wmd-test.html		dual-wmd-test.html
mit license.txt		mit license.txt
pasteme.txt		pasteme.txt
readme.txt		readme.txt
showdown.js		showdown.js
wmd-test.html		wmd-test.html
wmd.css		wmd.css
wmd.js		wmd.js

Repository files navigation

** 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