example.html

<!DOCTYPE html>
<html>
<head>
  <script src="prism-all.js"></script>
  <link rel="stylesheet" href="prism.css">
  <link rel="stylesheet" href="mdedit.css">
  <style>
  html, body {
    margin: 0;
    padding: 0;
  }

  .mdedit {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }

  </style>
</head>
<body>

<pre>


# Big heading

## Smaller heading

### Smaller

#### And

##### Smaller

Something **strong**. Something _emphatic_. Some `code`. Something ~~deleted~~.

 * Here
 * is a
 * list

 1. Numbered
 2. Lists
 3. Too

> Block quotes
> as well

[Links](foo) too [with titles](&lt;bar> "and all that jazz"). Also ![images](img).

&lt;html is="also valid markdown of course">

```javascript
$('code').with(/languages/, function(){
  // Also gets syntax highlighting
});
```

\&lt;escaped html doesn't count though>


# H1

## H2

### H3

#### H4

##### H5

##### H6

## H2 with trailing hashes ##


  ### H3 with some leading space


     # H1 indented too far


seText-style H1
======


seText-style H2
------


  unaligned H1
=


unaligned h2
  --


h1 indented too far
     =


not an hr:

===


this is an hr:

***

and this:

---

and this:

___


and this:

 *    *  * * ** **

not this:

 * _ *


**strong** stuff

__strong
stuff__


**not strong

stuff**


Here is some _emphatic_ stuff


*emphatic
stuff I say!*


_not

very emphatic_


Here is a **strong, *emphatic* thing**.

And **another *one***

And ***another one!***

And **_this_ one too**

And __this *one*__

This __is **silly though**__


Here is an _emphatic, **strong** thing_

And _another __one___

And *another **one***


~~deleted stuff~~


 * list
 * listy
 * listy

 1. num
 *  bered
 *  lists
    moar
 *  blah


 * **formatting** _in_ ~~lists~~ please with `code` and stuff
   * nesting?
   * maybe
   * too?


`code`

Lots of text with `code` in it

Code `has no *stuff inside it*`.

# Even `headings` can have code _and other_ **things**


[link](aaaa)

[link](&lt;aaa&gt;)

[link](aaaa "title")

[link](aaaa(foo) "tit\"le")

[link](&lt;blahblah&gt; 'som"e"thing')


![IMAGE](image)

![IMAGE](&lt;aaa&gt;)

![IMAGE](aaaa "title")

![IMAGE](aaaa(foo) "tit\"le")

![IMAGE](&lt;blahblah&gt; 'som"e"thing')


[link **with** _somme_ `formatting`](foo)

![image **with** _some_ `formatting`](bar)


This probably won't work:

[link with ![an image](foo)](bar)


> blockquote


> blockquote
> long
> long
> blockquote

> blockquote
  with
  lazy
coninutation
> and picking
> back up
agan

> * list
  * inside
  * blockquote
  * omg


[refdef]: /blah "title"

[def2]:
  /blah
  "title"


[link][withRef]

[link] [with other ref]

![img][withref]

![img] [withotherref]


[shortcut]


[shortcut **can have stuff in it**]

[shortcut **can have stuff in it**]: /ref "can't though"


![img shortcut]


```
CODE BLOK
```


~~~
CODE BLOK
~~~

    indented
    code is da
    best


```html
&lt;hi iam="some html">
```

~~~html
&lt;hi iam="some html">
~~~


Righty

&lt;table>
  hi I am some html
&lt;/table>


## &lt;i class="foo bar">ok then&lt;/i> stuffs


---
Still to do:

 * footnotes
 * emoji
 * tables
 * emails + urls

Bigger stuff:

 * Tweak Prism for a better concept of ordering and precedence
 * Lots of actions
    * ctrl-b bold/unbold
    * ctrl-i em/un-em
 * Sections?
 * urldef linkText / linkLabel?
 * think through linktext not allowing other links etc

</pre>

<script src="mdedit.js"></script>

<script>

var e = mdEdit(document.querySelector('pre'), {
  // change: function(value){ console.log('VALUE CHANGED', value); }
});

</script>

</body>
</html>