From 2d8e5c904f77c1211a21b84210ddbc00881de89c Mon Sep 17 00:00:00 2001 From: tanabe Date: Tue, 17 May 2011 23:50:41 +0900 Subject: [PATCH] update --- css/style.css | 45 ++++++++++++++++++++++++++++++++++++++------- index.html | 9 +++++++-- js/main.js | 21 +++++++++++++++++++++ 3 files changed, 66 insertions(+), 9 deletions(-) diff --git a/css/style.css b/css/style.css index a5b4b23..f4b67fe 100644 --- a/css/style.css +++ b/css/style.css @@ -18,29 +18,44 @@ p { margin: 1em; } -h1 { - color: #fff; - padding: 5px; - background-color: #302C29; +a:link, +a:visited, +a:hover +a:active { + color: #6C8C84; } -h2 { - color: #412726; +h1#header { + height: 50px; + color: #fff; + padding: 5px; + padding-left: 20px; + line-height: 50px; + background-color: #302C29; + font-size: 1.5em; font-weight: bold; } + #container { width: 960px; padding: 20px; margin: 0 auto; background-color: #fff; overflow: hidden; + min-height: 500px; } + #container .section { margin-bottom: 20px; } +.section h2 { + color: #466964; + font-weight: bold; +} + #leftColumn { float: left; width: 700px; @@ -57,11 +72,12 @@ textarea#markdown { width: 100%; height: 200px; font-size: 1em; + border: 2px solid #D1D1BC; } #output { background-color: #f8f8f8; - border: 1px solid #ccc; + border: 2px solid #A7C4BB; min-height: 100px; padding: 10px; } @@ -77,6 +93,7 @@ textarea#markdown { #output h5, #output h6 { font-weight: bold; + color: #000; } #output h1 { @@ -111,3 +128,17 @@ textarea#markdown { padding: 0; line-height: 1em; } + +#footer { + clear: both; + width: 100%; + height: 50px; + background-color: #302C29; + color: #fff; + line-height: 50px; + text-align: center; +} + +#footer a { + color: #fff; +} diff --git a/index.html b/index.html index 5cefc06..77b6fef 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ -

Markdown Live Previewer

+

Markdown Live Previewer

@@ -30,10 +30,15 @@

reference

-
+
sorry, its todo
+ + +
+ + diff --git a/js/main.js b/js/main.js index 7c7b82a..867a256 100644 --- a/js/main.js +++ b/js/main.js @@ -1,4 +1,25 @@ +var example = [ + "# hello, This is Markdown Live Previewer", + "", + "----", + "## 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 above textarea", + "2. render automatically to the output area", + "", + "----", + "## thanks", + "* [markdown-js](https://github.com/evilstreak/markdown-js)" +].join("\n"); $(function() { + $("#markdown").val(example); + $("#output").html(markdown.toHTML(example)); + $("#output").html(markdown.toHTML(example)); $("#markdown").bind("keyup", function() { $("#output").html(markdown.toHTML($("#markdown").val())); });