Update usage

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.

local-server.sh

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

public/index.html

@@ -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
+
+![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>
 

public/js/main.js

@@ -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);
+  //$('#markdown').val(example);
-  $('#output').html(markdown.toHTML(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()));
 });