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;
}
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;
}

9
index.html
View File

@ -12,7 +12,7 @@
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h1>Markdown Live Previewer</h1>
<h1 id="header">Markdown Live Previewer</h1>
<div id="container">
<div id="leftColumn">
@ -30,10 +30,15 @@
<div id="rightColumn">
<div class="section">
<h2>reference</h2>
<div id="rederence"></div>
<div id="reference">sorry, its todo</div>
<table>
</table>
</div>
</div>
</div>
<div id="footer"><a href="http://twitter.com/#!/tanabe">created by @tanabe</a></div>
</body>
</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() {
$("#markdown").val(example);
$("#output").html(markdown.toHTML(example));
$("#output").html(markdown.toHTML(example));
$("#markdown").bind("keyup", function() {
$("#output").html(markdown.toHTML($("#markdown").val()));
});