Update usage
This commit is contained in:
Hideaki Tanabe
parent
793d2ac5f8
commit
c9fdfe06b3
42
README.md
42
README.md
|
|
@ -1,42 +1,8 @@
|
|||
# hello, This is Markdown Live Preview
|
||||
# Markdown Live Preview
|
||||
|
||||
visit [markdownlivepreview.com](http://markdownlivepreview.com)
|
||||
This is the code for [Markdown Live Preview](https://markdownlivepreview.com/).
|
||||
|
||||
----
|
||||
## what is Markdown?
|
||||
see [Wikipedia](http://en.wikipedia.org/wiki/Markdown)
|
||||
|
||||
> Markdown is a lightweight markup language, originally created by John Gruber and Aaron Swartz allowing people "to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)".
|
||||
|
||||
----
|
||||
## usage
|
||||
1. Write markdown text in this textarea.
|
||||
2. Click 'HTML Preview' button.
|
||||
|
||||
----
|
||||
## markdown quick reference
|
||||
# headers
|
||||
|
||||
*emphasis*
|
||||
|
||||
**strong**
|
||||
|
||||
~~strikethrough~~
|
||||
|
||||
* list
|
||||
|
||||
>block quote
|
||||
|
||||
code (4 spaces indent)
|
||||
[links](http://wikipedia.org)
|
||||
|
||||
----
|
||||
## changelog
|
||||
* 13-Jan-2015 re-design
|
||||
* 17-Feb-2013 re-design
|
||||
* 19-May-2011 launch
|
||||
|
||||
----
|
||||
## thanks
|
||||
* [markdown-js](https://github.com/evilstreak/markdown-js)
|
||||
|
||||
## License
|
||||
See the [LICENSE](https://github.com/tanabe/markdown-live-preview/blob/master/LICENSE) file in this repo.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
#!/bin/bash
|
||||
|
||||
SCRIPT_DIR=$(cd $(dirname $0); pwd)
|
||||
pushd ./public
|
||||
python -m http.server 8000
|
||||
popd
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -38,7 +38,60 @@
|
|||
</ul>
|
||||
<div class="content">
|
||||
<textarea id="markdown">
|
||||
</textarea>
|
||||
# Markdown syntax guide
|
||||
|
||||
## Headers
|
||||
|
||||
# This is a Heading h1
|
||||
## This is a Heading h2
|
||||
###### This is a Heading h6
|
||||
|
||||
## Emphasis
|
||||
|
||||
*This text will be italic*
|
||||
_This will also be italic_
|
||||
|
||||
**This text will be bold**
|
||||
__This will also be bold__
|
||||
|
||||
_You **can** combine them_
|
||||
|
||||
## Lists
|
||||
|
||||
### Unordered
|
||||
|
||||
* Item 1
|
||||
* Item 2
|
||||
* Item 2a
|
||||
* Item 2b
|
||||
|
||||
### Ordered
|
||||
|
||||
1. Item 1
|
||||
1. Item 2
|
||||
1. Item 3
|
||||
1. Item 3a
|
||||
1. Item 3b
|
||||
|
||||
## Images
|
||||
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
You may be using [Markdown Live Preview](https://markdownlivepreview.com/).
|
||||
|
||||
## Blockquotes
|
||||
|
||||
> Markdown is a lightweight markup language with plain-text-formatting syntax, created in 2004 by John Gruber with Aaron Swartz.
|
||||
>
|
||||
>> Markdown is often used to format readme files, for writing messages in online discussion forums, and to create rich text using a plain text editor.
|
||||
|
||||
## Inline code
|
||||
|
||||
May the `Force` be with you
|
||||
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,49 +1,5 @@
|
|||
var example = [
|
||||
"# hello, This is Markdown Live Preview",
|
||||
"",
|
||||
"----",
|
||||
"## what is Markdown?",
|
||||
"see [Wikipedia](https://en.wikipedia.org/wiki/Markdown)",
|
||||
"",
|
||||
"> Markdown is a lightweight markup language, originally created by John Gruber and Aaron Swartz allowing people \"to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML)\".",
|
||||
"",
|
||||
"----",
|
||||
"## usage",
|
||||
"1. Write markdown text in this textarea.",
|
||||
"2. Click 'HTML Preview' button.",
|
||||
"",
|
||||
"----",
|
||||
"## markdown quick reference",
|
||||
"# headers",
|
||||
"",
|
||||
"*emphasis*",
|
||||
"",
|
||||
"**strong**",
|
||||
"",
|
||||
"* list",
|
||||
"",
|
||||
">block quote",
|
||||
"",
|
||||
" code (4 spaces indent)",
|
||||
"[links](https://wikipedia.org)",
|
||||
"",
|
||||
"----",
|
||||
"## changelog",
|
||||
"* 17-Feb-2013 re-design",
|
||||
"",
|
||||
"----",
|
||||
"## thanks",
|
||||
"* [markdown-js](https://github.com/evilstreak/markdown-js)",
|
||||
""
|
||||
].join("\n");
|
||||
|
||||
$(function() {
|
||||
var currentMode = 'edit';
|
||||
var container = $('#container');
|
||||
var header = $('#header');
|
||||
var headerHeight = header.outerHeight();
|
||||
var titleHeight = $('#header h1').outerHeight();
|
||||
var fixedTop = -titleHeight;
|
||||
var scrollTops = {
|
||||
'edit' : 0,
|
||||
'preview' : 0
|
||||
|
|
@ -51,8 +7,7 @@ $(function() {
|
|||
|
||||
var isEdited = false;
|
||||
|
||||
$('#markdown').val(example);
|
||||
$('#output').html(markdown.toHTML(example));
|
||||
//$('#markdown').val(example);
|
||||
$('#markdown').bind('keyup', function() {
|
||||
isEdited = true;
|
||||
$('#output').html(markdown.toHTML($('#markdown').val()));
|
||||
|
|
@ -107,4 +62,6 @@ $(function() {
|
|||
return 'Are you sure you want to leave? Your changes will be lost.';
|
||||
}
|
||||
});
|
||||
|
||||
$('#output').html(markdown.toHTML($('#markdown').val()));
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue