Merge design renewal branch.
Squashed commit of the following:
commit 0e5bd00043ffe0e8deba53447f998dc4b78da15a
Author: Hideaki Tanabe <tanablog@gmail.com>
Date: Sun Feb 17 02:32:48 2013 +0900
Update Google Analytics code.
commit f8121229e63a5d96cb2dd3e2916f3b65924295ae
Author: Hideaki Tanabe <tanablog@gmail.com>
Date: Sun Feb 17 02:11:07 2013 +0900
Add copyright.
commit b45120bb56d00f299907c1067a57a84df45ddc2f
Author: Hideaki Tanabe <tanablog@gmail.com>
Date: Sun Feb 17 01:46:48 2013 +0900
almost done.
commit 52c2c58c1477a825d5f30ae05412ca4b1d54c31e
Author: Hideaki Tanabe <tanablog@gmail.com>
Date: Sun Feb 17 00:06:55 2013 +0900
Imprement core feature.
commit b3ba7989a4dc285d3c15618ea267d29d8d8e6b6a
Author: Hideaki Tanabe <tanablog@gmail.com>
Date: Fri Feb 15 22:05:59 2013 +0900
Update libraries
This commit is contained in:
Hideaki Tanabe
parent
0d17bb03e8
commit
32c07059da
286
css/github.css
Normal file
286
css/github.css
Normal file
@ -0,0 +1,286 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
.markdown-body {
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
overflow: hidden
|
||||
}
|
||||
.markdown-body>*: first-child {
|
||||
margin-top: 0 !important
|
||||
}
|
||||
.markdown-body>*: last-child {
|
||||
margin-bottom: 0 !important
|
||||
}
|
||||
.markdown-body a.absent {
|
||||
color: #c00
|
||||
}
|
||||
.markdown-body a.anchor {
|
||||
display: block;
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0
|
||||
}
|
||||
.markdown-body h1,.markdown-body h2,.markdown-body h3,.markdown-body h4,.markdown-body h5,.markdown-body h6 {
|
||||
margin: 20px 0 10px;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
cursor: text;
|
||||
position: relative
|
||||
}
|
||||
.markdown-body h1 .mini-icon-link,.markdown-body h2 .mini-icon-link,.markdown-body h3 .mini-icon-link,.markdown-body h4 .mini-icon-link,.markdown-body h5 .mini-icon-link,.markdown-body h6 .mini-icon-link {
|
||||
display: none;
|
||||
color: #000
|
||||
}
|
||||
.markdown-body h1: hover a.anchor,.markdown-body h2: hover a.anchor,.markdown-body h3: hover a.anchor,.markdown-body h4: hover a.anchor,.markdown-body h5: hover a.anchor,.markdown-body h6: hover a.anchor {
|
||||
text-decoration: none;
|
||||
line-height: 1;
|
||||
padding-left: 0;
|
||||
margin-left: -22px;
|
||||
top: 15%
|
||||
}
|
||||
.markdown-body h1: hover a.anchor .mini-icon-link,.markdown-body h2: hover a.anchor .mini-icon-link,.markdown-body h3: hover a.anchor .mini-icon-link,.markdown-body h4: hover a.anchor .mini-icon-link,.markdown-body h5: hover a.anchor .mini-icon-link,.markdown-body h6: hover a.anchor .mini-icon-link {
|
||||
display: inline-block
|
||||
}
|
||||
.markdown-body h1 tt,.markdown-body h1 code,.markdown-body h2 tt,.markdown-body h2 code,.markdown-body h3 tt,.markdown-body h3 code,.markdown-body h4 tt,.markdown-body h4 code,.markdown-body h5 tt,.markdown-body h5 code,.markdown-body h6 tt,.markdown-body h6 code {
|
||||
font-size: inherit
|
||||
}
|
||||
.markdown-body h1 {
|
||||
font-size: 28px;
|
||||
color: #000
|
||||
}
|
||||
.markdown-body h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
color: #000
|
||||
}
|
||||
.markdown-body h3 {
|
||||
font-size: 18px
|
||||
}
|
||||
.markdown-body h4 {
|
||||
font-size: 16px
|
||||
}
|
||||
.markdown-body h5 {
|
||||
font-size: 14px
|
||||
}
|
||||
.markdown-body h6 {
|
||||
color: #777;
|
||||
font-size: 14px
|
||||
}
|
||||
.markdown-body p,.markdown-body blockquote,.markdown-body ul,.markdown-body ol,.markdown-body dl,.markdown-body table,.markdown-body pre {
|
||||
margin: 15px 0
|
||||
}
|
||||
.markdown-body hr {
|
||||
background: transparent url("https: //a248.e.akamai.net/assets.github.com/assets/primer/markdown/dirty-shade-6ead57f83b0f117a80ba77232aff0673bfd71263.png") repeat-x 0 0;
|
||||
border: 0 none;
|
||||
color: #ccc;
|
||||
height: 4px;
|
||||
padding: 0
|
||||
}
|
||||
.markdown-body>h2: first-child,.markdown-body>h1: first-child,.markdown-body>h1: first-child+h2,.markdown-body>h3: first-child,.markdown-body>h4: first-child,.markdown-body>h5: first-child,.markdown-body>h6: first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
.markdown-body a: first-child h1,.markdown-body a: first-child h2,.markdown-body a: first-child h3,.markdown-body a: first-child h4,.markdown-body a: first-child h5,.markdown-body a: first-child h6 {
|
||||
margin-top: 0;
|
||||
padding-top: 0
|
||||
}
|
||||
.markdown-body h1+p,.markdown-body h2+p,.markdown-body h3+p,.markdown-body h4+p,.markdown-body h5+p,.markdown-body h6+p {
|
||||
margin-top: 0
|
||||
}
|
||||
.markdown-body li p.first {
|
||||
display: inline-block
|
||||
}
|
||||
.markdown-body ul,.markdown-body ol {
|
||||
padding-left: 30px
|
||||
}
|
||||
.markdown-body ul.no-list,.markdown-body ol.no-list {
|
||||
list-style-type: none;
|
||||
padding: 0
|
||||
}
|
||||
.markdown-body ul li>: first-child,.markdown-body ul li ul: first-of-type,.markdown-body ol li>: first-child,.markdown-body ol li ul: first-of-type {
|
||||
margin-top: 0px
|
||||
}
|
||||
.markdown-body ul ul,.markdown-body ul ol,.markdown-body ol ol,.markdown-body ol ul {
|
||||
margin-bottom: 0
|
||||
}
|
||||
.markdown-body dl {
|
||||
padding: 0
|
||||
}
|
||||
.markdown-body dl dt {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
padding: 0;
|
||||
margin: 15px 0 5px
|
||||
}
|
||||
.markdown-body dl dt: first-child {
|
||||
padding: 0
|
||||
}
|
||||
.markdown-body dl dt>: first-child {
|
||||
margin-top: 0px
|
||||
}
|
||||
.markdown-body dl dt>: last-child {
|
||||
margin-bottom: 0px
|
||||
}
|
||||
.markdown-body dl dd {
|
||||
margin: 0 0 15px;
|
||||
padding: 0 15px
|
||||
}
|
||||
.markdown-body dl dd>: first-child {
|
||||
margin-top: 0px
|
||||
}
|
||||
.markdown-body dl dd>: last-child {
|
||||
margin-bottom: 0px
|
||||
}
|
||||
.markdown-body blockquote {
|
||||
border-left: 4px solid #DDD;
|
||||
padding: 0 15px;
|
||||
color: #777
|
||||
}
|
||||
.markdown-body blockquote>: first-child {
|
||||
margin-top: 0px
|
||||
}
|
||||
.markdown-body blockquote>: last-child {
|
||||
margin-bottom: 0px
|
||||
}
|
||||
.markdown-body table th {
|
||||
font-weight: bold
|
||||
}
|
||||
.markdown-body table th,.markdown-body table td {
|
||||
border: 1px solid #ccc;
|
||||
padding: 6px 13px
|
||||
}
|
||||
.markdown-body table tr {
|
||||
border-top: 1px solid #ccc;
|
||||
background-color: #fff
|
||||
}
|
||||
.markdown-body table tr: nth-child(2n) {
|
||||
background-color: #f8f8f8
|
||||
}
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box
|
||||
}
|
||||
.markdown-body span.frame {
|
||||
display: block;
|
||||
overflow: hidden
|
||||
}
|
||||
.markdown-body span.frame>span {
|
||||
border: 1px solid #ddd;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
padding: 7px;
|
||||
width: auto
|
||||
}
|
||||
.markdown-body span.frame span img {
|
||||
display: block;
|
||||
float: left
|
||||
}
|
||||
.markdown-body span.frame span span {
|
||||
clear: both;
|
||||
color: #333;
|
||||
display: block;
|
||||
padding: 5px 0 0
|
||||
}
|
||||
.markdown-body span.align-center {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both
|
||||
}
|
||||
.markdown-body span.align-center>span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: center
|
||||
}
|
||||
.markdown-body span.align-center span img {
|
||||
margin: 0 auto;
|
||||
text-align: center
|
||||
}
|
||||
.markdown-body span.align-right {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
clear: both
|
||||
}
|
||||
.markdown-body span.align-right>span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px 0 0;
|
||||
text-align: right
|
||||
}
|
||||
.markdown-body span.align-right span img {
|
||||
margin: 0;
|
||||
text-align: right
|
||||
}
|
||||
.markdown-body span.float-left {
|
||||
display: block;
|
||||
margin-right: 13px;
|
||||
overflow: hidden;
|
||||
float: left
|
||||
}
|
||||
.markdown-body span.float-left span {
|
||||
margin: 13px 0 0
|
||||
}
|
||||
.markdown-body span.float-right {
|
||||
display: block;
|
||||
margin-left: 13px;
|
||||
overflow: hidden;
|
||||
float: right
|
||||
}
|
||||
.markdown-body span.float-right>span {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
margin: 13px auto 0;
|
||||
text-align: right
|
||||
}
|
||||
.markdown-body code,.markdown-body tt {
|
||||
margin: 0 2px;
|
||||
padding: 0px 5px;
|
||||
border: 1px solid #eaeaea;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 3px
|
||||
}
|
||||
.markdown-body code {
|
||||
white-space: nowrap
|
||||
}
|
||||
.markdown-body pre>code {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
border: none;
|
||||
background: transparent
|
||||
}
|
||||
.markdown-body .highlight pre,.markdown-body pre {
|
||||
background-color: #f8f8f8;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 13px;
|
||||
line-height: 19px;
|
||||
overflow: auto;
|
||||
padding: 6px 10px;
|
||||
border-radius: 3px
|
||||
}
|
||||
.markdown-body pre code,.markdown-body pre tt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
color: #4183c4;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
|
||||
172
css/style.css
172
css/style.css
@ -1,12 +1,13 @@
|
||||
html, body {
|
||||
position: relative;
|
||||
color: #333;
|
||||
overflow-x: hidden;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #D1D1BC;
|
||||
font-family: helvetica, arial, freesans, clean, sans-serif;
|
||||
font-family: Helvetica, arial, freesans, clean, sans-serif;
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6, p {
|
||||
@ -24,26 +25,72 @@ a:link,
|
||||
a:visited,
|
||||
a:hover
|
||||
a:active {
|
||||
color: #6C8C84;
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
h1#header {
|
||||
position: relative;
|
||||
height: 50px;
|
||||
#header {
|
||||
padding: 10px 0 ;
|
||||
background-color: #444;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#header h1 {
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
line-height: 50px;
|
||||
background-color: #302C29;
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
-moz-box-shadow: 0 1px 4px #000;
|
||||
-webkit-box-shadow: 0 1px 4px #000;
|
||||
box-shadow: 0 1px 4px #000;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
ul#menu {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul#menu li {
|
||||
color: #999;
|
||||
margin: 0;
|
||||
margin-right: 5px;
|
||||
padding: 10px;
|
||||
list-style: none;
|
||||
display: inline-block;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
ul#menu a.edit li {
|
||||
padding-left: 35px;
|
||||
background: transparent url(../image/icon_edit_off.png) no-repeat 10px center;
|
||||
}
|
||||
|
||||
ul#menu a.edit.active li {
|
||||
background: transparent url(../image/icon_edit.png) no-repeat 10px center;
|
||||
}
|
||||
|
||||
ul#menu a.preview li {
|
||||
padding-left: 40px;
|
||||
background: transparent url(../image/icon_preview_off.png) no-repeat 10px center;
|
||||
}
|
||||
|
||||
ul#menu a.preview.active li {
|
||||
background: transparent url(../image/icon_preview.png) no-repeat 10px center;
|
||||
}
|
||||
|
||||
ul#menu li:hover {
|
||||
/* text-decoration: underline;*/
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0, 0.4), rgba(255,255,255,0.1) 0 1px 0;
|
||||
box-shadow: inset 0 0 5px rgba(0,0,0, 0.4), rgba(255,255,255,0.1) 0 1px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
ul#menu a.active li {
|
||||
color: #fff;
|
||||
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0, 0.4), rgba(255,255,255,0.1) 0 1px 0;
|
||||
box-shadow: inset 0 0 5px rgba(0,0,0, 0.4), rgba(255,255,255,0.1) 0 1px 0;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
#container {
|
||||
@ -54,14 +101,49 @@ h1#header {
|
||||
padding: 20px;
|
||||
margin: 0 auto;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
||||
#container .section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#content .mode {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#content .mode ul.submenu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
#content .mode ul.submenu li {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
border-radius: 3px;
|
||||
padding: 0 5px;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #f3f3f3;
|
||||
}
|
||||
|
||||
#content .mode ul.submenu li:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#content .mode .content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.section h2 {
|
||||
color: #466964;
|
||||
font-weight: bold;
|
||||
@ -83,12 +165,16 @@ textarea#markdown {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
font-size: 1em;
|
||||
border: 2px solid #D1D1BC;
|
||||
height: 400px;
|
||||
overflow: auto;
|
||||
font-size: 15px;
|
||||
border: none;
|
||||
/* border: 2px solid #D1D1BC;*/
|
||||
resize: vertical;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/*
|
||||
#output {
|
||||
background-color: #f8f8f8;
|
||||
border: 2px solid #A7C4BB;
|
||||
@ -131,7 +217,7 @@ textarea#markdown {
|
||||
#output pre {
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
color: #444;
|
||||
color: #g;
|
||||
background-color: #eee;
|
||||
border: 1px solid #ddd;
|
||||
line-height: 1.5em;
|
||||
@ -142,6 +228,7 @@ textarea#markdown {
|
||||
padding: 0;
|
||||
line-height: 1em;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
table#reference {
|
||||
@ -197,20 +284,45 @@ table#reference td {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
|
||||
#footer {
|
||||
clear: both;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #302C29;
|
||||
padding: 10px;
|
||||
margin-bottom: 30px;
|
||||
background-color: #444;
|
||||
color: #fff;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
-moz-box-shadow: 0 -1px 4px #000;
|
||||
-webkit-box-shadow: 0 -1px 4px #000;
|
||||
box-shadow: 0 -1px 4px #000;
|
||||
}
|
||||
|
||||
#footer a {
|
||||
color: #fff;
|
||||
#footer #copyright {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
|
||||
#footer #copyright a {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#footer #copyright a:hover {
|
||||
color: #fff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
ul#shareLinks,
|
||||
ul#shareLinks li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul#shareLinks li {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ul#shareLinks li.facebook {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
BIN
favicon.ico
Normal file
BIN
favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
image/icon_edit.png
Normal file
BIN
image/icon_edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 143 B |
BIN
image/icon_edit_off.png
Normal file
BIN
image/icon_edit_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
BIN
image/icon_preview.png
Normal file
BIN
image/icon_preview.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 348 B |
BIN
image/icon_preview_off.png
Normal file
BIN
image/icon_preview_off.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
image/logo.png
BIN
image/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB After Width: | Height: | Size: 2.0 KiB |
141
index.html
141
index.html
@ -6,16 +6,75 @@
|
||||
<meta http-equiv="content-script-type" content="text/javascript">
|
||||
<meta http-equiv="content-style-type" content="text/css">
|
||||
<meta name="description" content="This is the Markdown editor with live preview. enjoy.">
|
||||
<meta name="keywords" content="markdown,editor,github,reference">
|
||||
<meta name="keywords" content="markdown,editor,github,live,preview,tutorial">
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="css/style.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/github.css">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
|
||||
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
|
||||
<script type="text/javascript" src="js/jquery.autosize-min.js"></script>
|
||||
<script type="text/javascript" src="js/markdown.js"></script>
|
||||
<script type="text/javascript" src="js/main.js"></script>
|
||||
|
||||
<title>Markdown Live Preview</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="header">
|
||||
<h1><a href="./"><img src="image/logo.png" width="306" height="20" alt="Markdown Live Preview"></a></h1>
|
||||
<ul id="menu">
|
||||
<a href="javascript:void(null);" data-menu-id="edit" class="edit active"><li>Edit Markdown</li></a>
|
||||
<a href="javascript:void(null);" class="preview" data-menu-id="preview"><li>HTML Preview</li></a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div id="container">
|
||||
<div id="content" class="section">
|
||||
|
||||
<div id="edit" class="mode">
|
||||
<ul class="submenu">
|
||||
<a href="javascript:void(null);" id="clearButton"><li>clear</li></a>
|
||||
</ul>
|
||||
<div class="content">
|
||||
<textarea id="markdown">
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="preview" class="mode">
|
||||
<div id="output" class="content markdown-body">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer">
|
||||
<ul id="shareLinks">
|
||||
<li class="google">
|
||||
<!-- Place this tag where you want the share button to render. -->
|
||||
<div class="g-plus" data-action="share"></div>
|
||||
|
||||
<!-- Place this tag after the last share tag. -->
|
||||
<script type="text/javascript">
|
||||
(function() {
|
||||
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
|
||||
po.src = 'https://apis.google.com/js/plusone.js';
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
|
||||
})();
|
||||
</script>
|
||||
</li>
|
||||
<li class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://markdownlivepreview.com" data-via="tanabe">Tweet</a>
|
||||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></li>
|
||||
<li class="facebook"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmarkdownlivepreview.com&send=false&layout=standard&width=450&show_faces=false&font=tahoma&colorscheme=dark&action=like&height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe></li>
|
||||
</ul>
|
||||
<div id="copyright">Copyright 2013 <a href="https://twitter.com/tanabe">tanabe</a>.</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var _gaq = _gaq || [];
|
||||
_gaq.push(['_setAccount', 'UA-73660-11']);
|
||||
_gaq.push(['_setAccount', 'UA-73660-14']);
|
||||
_gaq.push(['_trackPageview']);
|
||||
|
||||
(function() {
|
||||
@ -24,84 +83,6 @@
|
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
||||
})();
|
||||
</script>
|
||||
<title>Markdown Live Preview</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1 id="header"><a href="./"><img src="image/logo.png" width="315" height="22" alt="Markdown Live Preview"></a></h1>
|
||||
<div id="container">
|
||||
|
||||
<div id="leftColumn">
|
||||
<div class="section">
|
||||
<h2>markdown</h2>
|
||||
<textarea id="markdown"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>output</h2>
|
||||
<div id="output"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="rightColumn">
|
||||
<div class="section">
|
||||
<h2>reference</h2>
|
||||
<table id="reference">
|
||||
<tr>
|
||||
<th>You type</th>
|
||||
<th>You get</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td># h1</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>*emphasis*</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>**strong**</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>* list</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>1. list</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>> this is<br>> quote</td>
|
||||
<td><script type="text/javascript">document.write(markdown.toHTML("> this is\n\n> quote"))</script></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td> code<br>(4 spaces indent)</td>
|
||||
<td><script type="text/javascript">document.write(markdown.toHTML(" code"))</script></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>[Wikipedia](http://wikipedia.org)</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>----</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="footer"><a href="http://twitter.com/#!/tanabe">created by @tanabe</a></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
5
js/jquery-1.9.1.min.js
vendored
Normal file
5
js/jquery-1.9.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
7
js/jquery.autosize-min.js
vendored
Normal file
7
js/jquery.autosize-min.js
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
/*
|
||||
jQuery Autosize v1.16.5
|
||||
(c) 2013 Jack Moore - jacklmoore.com
|
||||
updated: 2013-02-11
|
||||
license: http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
(function(e){var t,o={className:"autosizejs",append:"",callback:!1},i="hidden",n="border-box",s="lineHeight",a='<textarea tabindex="-1" style="position:absolute; top:-999px; left:0; right:auto; bottom:auto; border:0; -moz-box-sizing:content-box; -webkit-box-sizing:content-box; box-sizing:content-box; word-wrap:break-word; height:0 !important; min-height:0 !important; overflow:hidden;"/>',r=["fontFamily","fontSize","fontWeight","fontStyle","letterSpacing","textTransform","wordSpacing","textIndent"],l="oninput",c="onpropertychange",h=e(a).data("autosize",!0)[0];h.style.lineHeight="99px","99px"===e(h).css(s)&&r.push(s),h.style.lineHeight="",e.fn.autosize=function(s){return s=e.extend({},o,s||{}),h.parentNode!==document.body&&e(document.body).append(h),this.each(function(){function o(){t=b,h.className=s.className,e.each(r,function(e,t){h.style[t]=f.css(t)})}function a(){var e,n,a;if(t!==b&&o(),!d){d=!0,h.value=b.value+s.append,h.style.overflowY=b.style.overflowY,a=parseInt(b.style.height,10),h.style.width=Math.max(f.width(),0)+"px",h.scrollTop=0,h.scrollTop=9e4,e=h.scrollTop;var r=parseInt(f.css("maxHeight"),10);r=r&&r>0?r:9e4,e>r?(e=r,n="scroll"):p>e&&(e=p),e+=g,b.style.overflowY=n||i,a!==e&&(b.style.height=e+"px",x&&s.callback.call(b)),setTimeout(function(){d=!1},1)}}var p,d,u,b=this,f=e(b),g=0,x=e.isFunction(s.callback);f.data("autosize")||((f.css("box-sizing")===n||f.css("-moz-box-sizing")===n||f.css("-webkit-box-sizing")===n)&&(g=f.outerHeight()-f.height()),p=Math.max(parseInt(f.css("minHeight"),10)-g,f.height()),u="none"===f.css("resize")||"vertical"===f.css("resize")?"none":"horizontal",f.css({overflow:i,overflowY:i,wordWrap:"break-word",resize:u}).data("autosize",!0),c in b?l in b?b[l]=b.onkeyup=a:b[c]=a:b[l]=a,e(window).resize(function(){d=!1,a()}),f.bind("autosize",function(){d=!1,a()}),a())})}})(window.jQuery||window.Zepto);
|
||||
106
js/main.js
106
js/main.js
@ -9,20 +9,92 @@ var example = [
|
||||
"",
|
||||
"----",
|
||||
"## usage",
|
||||
"1. write markdown text in above textarea",
|
||||
"2. render automatically to the output area",
|
||||
"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](http://wikipedia.org)",
|
||||
"",
|
||||
"----",
|
||||
"## changelog",
|
||||
"* 17-Feb-2013 re-design",
|
||||
"",
|
||||
"----",
|
||||
"## thanks",
|
||||
"* [markdown-js](https://github.com/evilstreak/markdown-js)"
|
||||
"* [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()));
|
||||
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
|
||||
};
|
||||
|
||||
var isEdited = false;
|
||||
|
||||
$(window).scroll(function() {
|
||||
var scrollTop = $(window).scrollTop();
|
||||
scrollTops[currentMode] = scrollTop;
|
||||
if ((scrollTop > titleHeight)) {
|
||||
header.css({
|
||||
'position' : 'fixed',
|
||||
'top' : fixedTop + 'px',
|
||||
'z-index' : '100'
|
||||
});
|
||||
|
||||
container.css({
|
||||
'margin-top' : headerHeight + 'px'
|
||||
});
|
||||
|
||||
} else {
|
||||
header.css('position', 'static');
|
||||
container.css({
|
||||
'margin-top' : 0
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$('#markdown').val(example);
|
||||
$('#output').html(markdown.toHTML(example));
|
||||
$('#markdown').bind('keyup', function() {
|
||||
isEdited = true;
|
||||
$('#output').html(markdown.toHTML($('#markdown').val()));
|
||||
});
|
||||
|
||||
//menu
|
||||
var menuItems = $('#menu a');
|
||||
menuItems.click(function(event) {
|
||||
event.preventDefault();
|
||||
|
||||
menuItems.removeClass('active');
|
||||
var sender = $(event.currentTarget);
|
||||
sender.addClass('active');
|
||||
|
||||
$('#content .mode').hide();
|
||||
var menuId = sender.data('menuId');
|
||||
currentMode = menuId;
|
||||
$('#' + menuId).show();
|
||||
$(window).scrollTop(scrollTops[currentMode]);
|
||||
|
||||
});
|
||||
|
||||
//reference
|
||||
@ -32,4 +104,22 @@ $(function() {
|
||||
self.html(markdown.toHTML(self.siblings().html()));
|
||||
}
|
||||
});
|
||||
|
||||
//clear
|
||||
$('#clearButton').click(function(event) {
|
||||
event.preventDefault();
|
||||
if (window.confirm('Are you sure you want to delete?')) {
|
||||
$('#markdown').val('');
|
||||
}
|
||||
});
|
||||
|
||||
//autoresize
|
||||
$('textarea').autosize();
|
||||
|
||||
//leave
|
||||
$(window).bind('beforeunload', function() {
|
||||
if (isEdited) {
|
||||
return 'Are you sure you want to leave? Your changes will be lost.';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
736
js/markdown.js
736
js/markdown.js
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user