index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="MDMagick is the most simple and easy to integrate MarkDown HTML WYSIWYG" />
  <meta name="keywords" content="jQuery, plugin, markdown, wysiwyg" />
  <meta name="author" content="http://fernandoguillen.info" />

  <title>MDMagick</title>

  <!-- demo page styles -->
  <link rel="stylesheet" href="./reset.css" ></style>
  <link rel="stylesheet" href="./style.css" ></style>

  <!-- dependencies -->
  <script src="./vendor/jquery.js" type="text/javascript" charset="utf-8"></script>
  <script src="./vendor/a-tools.js" type="text/javascript" charset="utf-8"></script>
  <script src="./vendor/showdown.js" type="text/javascript" charset="utf-8"></script>
  <script src="./lib/mdmagick.js" type="text/javascript" charset="utf-8"></script>

  <!-- mdm styles -->
  <link rel="stylesheet" href="./assets/mdmagick.css" ></style>
  <link rel="stylesheet" href="./assets/icon_font/style.css" />
  <!--[if lte IE 7]><script src="./assets/icon_font/lte-ie7.js"></script><![endif]-->

  <style>
    textarea.big {
      height: 100px;
    }

    input.big,
    textarea.big {
      width: 600px;
      padding: 5px;
      font-size: 12px;
    }
  </style>

</head>
<body>
  <div id="container">

    <h1>MDMagick</h1>
    <h2>The most simple and easy to integrate MarkDown HTML WYSIWYG</h2>
    <p>Add <b>style butttons</b> and <b>preview</b> to any kind of input field</p>
    <p>
      <ul>
        <li><a href="https://github.com/fguillen/MDMagick">MDMagick's code</a></li>
        <li><a href="http://fguillen.github.com/MDMagick">MDMagick's demo page</a></li>
        <li><a href="https://github.com/fguillen/MDMagick/blob/master/README.md">MDMagick's README</a></li>
      </ul>
    </p>
    <p><strong>Demo page</strong>: Focus in the different input fields and interact with the helper buttons.</p>


    <h3>Use</h3>
    <p>Just add the class <strong>mdm-input</strong> to any input element in your page and it will became in a MarkDown Editor.</p>

    <p> Or you can do it in a more explicit way:
      <pre>$('.css-selector').mdmagick();</pre>
    </p>


    <section>
      <h1>A textarea</h1>
      <p>Simple textarea is becomed in a MarkDown editor with buttons and preview</p>
      <textarea id="input-1" class="big">This is a textarea where you can **edit** and use the _above buttons_ to modify styling

it has one line

and another line

A list of elements:

- one
- two
- three</textarea>

      <script>
        $(function(){
          $("#input-1").mdmagick();
        })
      </script>

    </section>

    <section>
      <h1>A textfield</h1>
      <p>Same can be done with a simple input text field</p>
      <input id="input-2" type="text" class="big" value="This is an input **text**" />

      <script>
        $(function(){
          $("#input-2").mdmagick();
        })
      </script>
    </section>

    <section>
      <h1>Authomatic MDMagick with a textarea</h1>
      <p>Every element with class <strong>mdm-input</strong> will be becomed in a MDMagick input.</p>
      <textarea id="textarea-1" class="big mdm-input">This is a textarea **authomatically** converted to a MDMagick input.</textarea>
    </section>

    <footer>
      <p>
        <a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/80x15.png" /></a>
        <br />
        <span xmlns:dct="http://purl.org/dc/terms/" href="http://purl.org/dc/dcmitype/InteractiveResource" property="dct:title" rel="dct:type">MDMagick jQuery plugin</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://fernandoguillen.info" property="cc:attributionName" rel="cc:attributionURL">Fernando Guillen</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.
      </p>
    </footer>
  </div>

  <!-- google analytics -->
  <script type="text/javascript">

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-34268044-1']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

  </script>
  <!-- google analytics -->
</body>
</html>