开源软件名称（OpenSource Name）：

开源软件地址(OpenSource Url)：

开源编程语言(OpenSource Language)：

开源软件介绍(OpenSource Introduction)：

markdown-html-form

The purpose of this project is to create the most simple and efficient way to write blog posts and other content on the web. This is accomplished through an easy to setup markdown to html form element and preview.

Usage

HTML Setup

In order to use this project, you must have at least one textarea tag with the .mdhtmlform-md class on it. All markdown input into this field will be converted to html and kept in sync with with any divs or textareas with the .mdhtmlform-html on them. So a typical setup might look like this:

<!-- Edit markdown here! -->
<textarea class="mdhtmlform-md">## Write markdown in the textarea!</textarea>
<br /><br />

<!-- Display converted html here! -->
<div class="mdhtmlform-html"></div>
<br /><br />

<!-- And insert converted html for submission here. -->
<textarea class="mdhtmlform-html" style="display: none;"></textarea>

Javascript Setup

Simply include the mdhtmlform.js file found in the src/ folder after jQuery and Showdown, and you're good to go.

Two-way Conversion

I've shown how to sync the Markdown to an HTML preview div or textarea, but if you also want the HTML textarea to sync back to Markdown then that's easy too. Just make sure you also include to-markdown before mdhtmlform and the HTML will sync back automatically. Don't forget your HTML textarea still needs the mdhtmlform-html class. Check out examples/two-way for an example.

Multiple Instances

If you need multiple Markdown textareas syncing their HTML to separate elements on the same page, this is also easily accomplished. Just add a unique data-mdhtmlform-group data attribute to the elements of each instance you need. Here's an example:

<!-- The first Markdown input -->
<textarea class="mdhtmlform-md" data-mdhtmlform-group="0">## Write markdown in the textarea!</textarea>
<br /><br />

<!-- HTML preview of whatever is in the first Markdown input -->
<div class="mdhtmlform-html" data-mdhtml-group="0"></div>
<br /><br />

<!-- The second Markdown input -->
<textarea class="mdhtmlform-md" data-mdhtmlform-group="1">## Write completely different markdown in this textarea!</textarea>
<br /><br />

<!-- HTML preview of whatever is in the second Markdown input -->
<div class="mdhtmlform-html" data-mdhtml-group="1"></div>

Check out the examples/multiple/ folder for a full working example.

Initialization

The project will initialize itself and start working automatically when jQuery is ready, but if you want to initialize it yourself at a differnt time, simply call its constructor and pass in the Markdown textarea you're using:

new MdHtmlForm($("textarea.mdhtmlform-md"))

Examples

Check out the examples in the examples/ folder to see some working demos. All make use of HTML5 Boilerplate for their starting points.

Simple Example

Live at: http://justinmccandless.com/demos/markdown-html-form/examples/simple/index.html

The simple example is probably the most basic use case of the project. Markdown entered into a form shows a preview in realtime, and on submission of the form submits the converted html via a hidden input.

Two-way Example

Live at: http://justinmccandless.com/demos/markdown-html-form/examples/two-way/index.html

This examples shows how to sync in both directions, with a raw HTML textarea syncing with a Markdown textarea and a preview div.

Multiple Example

Live at: http://justinmccandless.com/demos/markdown-html-form/examples/multiple/index.html

This examples shows how to get two independent instances of the project working on the same page. Convert two differnt Markdown textareas to two differnt HTML previews.

Hallo Example

Live at: http://justinmccandless.com/demos/markdown-html-form/examples/hallo/index.html

This example makes use of Hallo to make the live preview of the markdown editable. This basically gives you a markdown editor and a WYSIWYG editor kept in sync.

License

This project is free software licensed under the MIT license. See LICENSE.md.