iiiypuk/markdown-live-preview
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
tanabe 2011-05-17 23:50:41 +09:00
parent 214f06dc74
commit 2d8e5c904f
3 changed files with 66 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
css/style.css
View File

@ -18,29 +18,44 @@ p {
margin: 1em; margin: 1em;
} }
h1 { a:link,
color: #fff; a:visited,
padding: 5px; a:hover
background-color: #302C29; a:active {
color: #6C8C84;
} }
h2 { h1#header {
color: #412726; height: 50px;
color: #fff;
padding: 5px;
padding-left: 20px;
line-height: 50px;
background-color: #302C29;
font-size: 1.5em;
font-weight: bold; font-weight: bold;
} }
#container { #container {
width: 960px; width: 960px;
padding: 20px; padding: 20px;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
min-height: 500px;
} }
#container .section { #container .section {
margin-bottom: 20px; margin-bottom: 20px;
} }
.section h2 {
color: #466964;
font-weight: bold;
}
#leftColumn { #leftColumn {
float: left; float: left;
width: 700px; width: 700px;
@ -57,11 +72,12 @@ textarea#markdown {
width: 100%; width: 100%;
height: 200px; height: 200px;
font-size: 1em; font-size: 1em;
border: 2px solid #D1D1BC;
} }
#output { #output {
background-color: #f8f8f8; background-color: #f8f8f8;
border: 1px solid #ccc; border: 2px solid #A7C4BB;
min-height: 100px; min-height: 100px;
padding: 10px; padding: 10px;
} }
@ -77,6 +93,7 @@ textarea#markdown {
#output h5, #output h5,
#output h6 { #output h6 {
font-weight: bold; font-weight: bold;
color: #000;
} }
#output h1 { #output h1 {
@ -111,3 +128,17 @@ textarea#markdown {
padding: 0; padding: 0;
line-height: 1em; 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;
}

9
index.html
View File

@ -12,7 +12,7 @@
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</head> </head>
<body> <body>
<h1>Markdown Live Previewer</h1> <h1 id="header">Markdown Live Previewer</h1>
<div id="container"> <div id="container">
<div id="leftColumn"> <div id="leftColumn">
@ -30,10 +30,15 @@
<div id="rightColumn"> <div id="rightColumn">
<div class="section"> <div class="section">
<h2>reference</h2> <h2>reference</h2>
<div id="rederence"></div> <div id="reference">sorry, its todo</div>
<table>
</table>
</div> </div>
</div> </div>
</div> </div>
<div id="footer"><a href="http://twitter.com/#!/tanabe">created by @tanabe</a></div>
</body> </body>
</html> </html>

21
js/main.js
View File

@ -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() { $(function() {
$("#markdown").val(example);
$("#output").html(markdown.toHTML(example));
$("#output").html(markdown.toHTML(example));
$("#markdown").bind("keyup", function() { $("#markdown").bind("keyup", function() {
$("#output").html(markdown.toHTML($("#markdown").val())); $("#output").html(markdown.toHTML($("#markdown").val()));
}); });