Update usage

This commit is contained in:
Hideaki Tanabe 2020-07-18 01:31:22 +09:00
parent 793d2ac5f8
commit c9fdfe06b3
5 changed files with 67 additions and 85 deletions

View File

@ -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.

6
local-server.sh Executable file
View File

@ -0,0 +1,6 @@
#!/bin/bash
SCRIPT_DIR=$(cd $(dirname $0); pwd)
pushd ./public
python -m http.server 8000
popd

BIN
public/image/sample.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 26 KiB

View File

@ -38,6 +38,59 @@
</ul>
<div class="content">
<textarea id="markdown">
# 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
![This is a alt text.](/image/sample.png "This is a sample image.")
## 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>

View File

@ -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()));
});