-
Notifications
You must be signed in to change notification settings - Fork 64
/
index.html
56 lines (48 loc) · 2.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!doctype html>
<link href='dist/woofmark.css' rel='stylesheet' type='text/css' />
<link href='example/example.css' rel='stylesheet' type='text/css' />
<link href='example/highlights.css' rel='stylesheet' type='text/css' />
<title>woofmark</title>
<h1>woofmark</h1>
<h3>Barking up the DOM tree. <b>**woof** <strong>woof</strong></b><br/>A modular, progressive, and beautiful Markdown and HTML editor</h3>
<a href='https://github.com/bevacqua/woofmark'>
<img class='gh-fork' src='https://camo.githubusercontent.com/52760788cde945287fbb584134c4cbc2bc36f904/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f77686974655f6666666666662e706e67' alt='Fork me on GitHub' data-canonical-src='https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png' />
</a>
<div class='parent'>
<label for='ta'>Create your website in the area below: </label>
<div>
<textarea id='ta', autofocus># Markdown?
Here's a teensie bit of [Markdown][1] to get you started.
Markdown lets you <mark>produce **rich** HTML-formatted text by writing _plain text_</mark>. You can write `code`, text in _italics_ or give them **a "bolder" format**. You can create headings by prefixing them with one or more hash characters _(#)_. The _less hashes_ they have, the _more prominent_ your headings become.
Creating **links** is merely a matter of [wrapping some text in brackets][2] and referencing a resource locator, like the ones you'll find at the bottom of this text. <mark>Images can be embedded</mark> just the same, except you'll have to prefix the wrapped text with _an exclamation mark_.
> Click on the <kbd>HTML</kbd> button to see this text come to life as HTML, the <mark>markup</mark> language of the web.
>
> -- Nico
Note that,
```js
var markTags = 'still work';
var within = true;
function code (<mark>here, are, some, args</mark>) {
// do wonderful things!
return here * are - some + args;
}
```
[1]: http://daringfireball.net/projects/markdown/ "Original introduction to Markdown"
[2]: http://ponyfoo.com</textarea>
</div>
<pre>
<code>
woofmark(document.querySelector('#ta'), {
parseMarkdown: megamark,
parseHTML: domador
});
</code>
</pre>
<sub><strong>Disclaimer:</strong> the example has a teensie bit more of code that's used to preserve the GitHub-style <kbd>```</kbd> code fences.</sub>
</div>
<div class='parent'>
<label>The buttons above look kind of rough, but that's on purpose: it's up to you to style them and the API helps you do that. Here's another example using Font Awesome.</label>
<img src='http://i.imgur.com/AhwXSLu.png' />
</div>
<h3>Get it on GitHub! <a href='https://github.com/bevacqua/woofmark'>bevacqua/woofmark</a></h3>
<script src='dist/example.js'></script>