Snarkdown

by wenyi

HTML

<script src="https://unpkg.com/[email protected]/dist/snarkdown.umd.js"></script>
<textarea id="in" placeholder="Markdown">
## Snarkdown

------

![snarkdown](http://emojipop.net/data/images/emoji_set_77.png)

*[Snarkdown](http://github.com/developit/snarkdown)* is __easy__ to `use`!

Here's an [**important** anchor link](#example).

Two newlines creates a line break.

Or, end a line with two spaces.  
Just like that!

Code &amp; Poetry
-------------

    You can also indent
    blocks to display
    code or poetry.
    
    Indented code/poetry blocks  
    can be hard-wrapped.

**Or, wrap your code in three backticks:**

```JavaScript
function codeBlocks() {
    return 'Can be inserted';
}
```


### Block Quotes

> You can insert quotes by
> preceeding each line with `>`.
>
> Blockquotes can also contain line  
> breaks.


## Lists

- Unordered
* Lists
+ Of mixed type

1. Ordered
2. Lists
4. Numbers are ignored

</textarea>

<div id="out"></div>

<pre id="code"></pre>

CSS

html, body {
  font: 15px/1.3 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
  font-weight: 400;
}
#in, #out, #code {
  position: absolute;
  box-sizing: border-box;
  top: 0;
  height: 100%;
  width: 50%;
  padding: 10px;
  background: #F9F9F9;
  border: none;
  font: inherit;
}
#in {
  left: 0;
  background: #FFF;
	outline: none;
}
#out, #code {
  left: 50%;
  height: 75%;
  border-left: 1px solid #CCC;
  overflow: auto;
}
#code {
  top: 75%;
	height: 25%;
  background: #333;
  color: #DDD;
	margin: 0;
}


/** Markdown styling */
br {
    content: 'A';
    display: block;
    margin-bottom: 0.5em;
}
code {
    padding: 0 3px;
    border: 1px solid #CCC;
    border-radius: 2px;
    background: #FFF;
}
pre.code {
    padding: 2px 5px;
    border: 1px solid #DDD;
    background: #FFF;
    border-left-width: 3px;
}

Babel + JSX

let $ = document.querySelector.bind(document);

function run() {
	let html = snarkdown($('#in').value);
	$('#out').innerHTML = html;
	$('#code').textContent = html;
}

$('#in').oninput = run;

run();