Chad Coleman

Pulled from the WMD main site.

WMD is a simple, lightweight HTML editor for blog comments, forum posts, and basic content management. You can add WMD to any textarea with one line of code. Add live preview with one line more. WMD works in nearly all modern browsers, and is now completely free to use. The next release will be open source under an MIT-style license.

This is not a WYSIWYG editor. Writing HTML to look a certain way can make your text less accessible to blind people, search engines, mobile users, and feed readers. HTML describes a document’s logical structure—not its appearance. It just wasn’t built for WYSIWYG.

So WMD is something new: a Wysiwym Markdown editor.

• Wysiwym stands for What You See Is What You Mean. WMD produces clean semantic HTML, leaving presentation details like fonts and colors up to style sheets. But you’re not left in the dark about cosmetics; as you type, WMD’s live preview shows you exactly what your text will look like after the current styles have been applied.
• Markdown is a simple markup language that’s as easy to read and write as plain-text email. WMD uses Markdown as an input format, converting it into HTML behind the scenes. You can also mix raw HTML with Markdown, so the full expressiveness of HTML is always there if you need it.

WMD is just as easy to use as any WYSIWYG editor, so you don’t need to know anything about Markdown or HTML to write clean, semantically meaningful markup. You click the buttons, and WMD writes the Markdown.

Live Preview Feature

In order to use the live preview feature (see demo below), you’ll need to edit your template file comments.php.

You’ll need to add this html


<h2 class="previewtitle">Live Comment Preview</h2>
<div class="wmd-preview"></div>


to the bottom of that file, just above the endif; call. So it should appear much like this:

1
2
3
4

<?php endif; // If registration required and not logged in ?>
<h2 class="previewtitle">Live Comment Preview</h2>
<div class="wmd-preview"></div>
<?php endif; // if you delete this the sky will fall on your head ?>

You can lose or modify the <h2> tag to better suit your design needs.

Download

WMD Editor Plugin 1.0

Suggestions on how to improve the plugin code are always welcome.