Permalink
Browse files

Updated install instructions.

  • Loading branch information...
1 parent d177ec9 commit 4ddd030db475310013da6c246a4df4d53bbf6663 @derobins derobins committed Jan 29, 2009
Showing with 30 additions and 12 deletions.
  1. +30 −12 readme.txt
View
@@ -1,7 +1,9 @@
Installing WMD
--------------
-1. Add the CSS stylesheet to your head.
+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" />
@@ -12,29 +14,45 @@ Installing WMD
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 and CSS class are "wmd-button-bar".
+ This will contain WMD's buttons. id is "wmd-button-bar".
2. An input textarea
- This is where you'll enter markdown. id and CSS class are "wmd-input".
+ 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 and CSS class are
- "wmd-preview".
+ 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 and
- CSS class are "wmd-output".
+ useful for most web pages but useful for troubleshooting WMD :) id
+ is "wmd-output".
Example:
@@ -48,13 +66,13 @@ Example:
<body>
- <div id="wmd-button-bar" class="wmd-button-bar"></div>
+ <div id="wmd-button-bar" class="wmd-panel"></div>
<br/>
- <textarea id="wmd-input" class="wmd-input"></textarea>
+ <textarea id="wmd-input" class="wmd-panel"></textarea>
<br/>
- <div id="wmd-preview" class="wmd-preview"></div>
+ <div id="wmd-preview" class="wmd-panel"></div>
<br/>
- <div id="wmd-output" class="wmd-output"></div>
+ <div id="wmd-output" class="wmd-panel"></div>
<script type="text/javascript" src="wmd.js"></script>
@@ -65,4 +83,4 @@ Support
-------
If you're having trouble getting WMD up and running, feel free to
-email me: <support@attacklab.net>
+message me on github: http://github.com/derobins

0 comments on commit 4ddd030

Please sign in to comment.