Browse Source

Add Markdown Preview

master
sipp11 10 years ago
parent
commit
1152293d10
  1. 88
      content/media/2015/05/markdown-preview/index.html
  2. 5
      content/media/2015/05/markdown-preview/jquery.min.js
  3. 11
      content/media/2015/05/markdown-preview/manhattan.css
  4. 1725
      content/media/2015/05/markdown-preview/markdown.js
  5. 193
      content/media/2015/05/markdown-preview/style.css
  6. 1
      content/pages/misc.md

88
content/media/2015/05/markdown-preview/index.html

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Markdown Preview</title>
<link rel="stylesheet" href="manhattan.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div mhtn="container">
<div mhtn="row">
<div mhtn="col xs-100 sm-100 md-100">
<h1>Markdown Preview</h1>
<p>Markdown เปนการเขยนแบบนงเพอใส style ตางๆเขาไปเวลาแสดงผล syntax ไมบซอน ไมเยนเยอ ตวอยางหลกๆ กตามทเหนดานลางครบ ลองแกลองทำดกพกกจะเขาใจคร</p>
<p>รายละเอยด syntax ทงหมดจรงๆกหาขอมลตาม <a href="http://daringfireball.net/projects/markdown/">project หลกเค</a></p>
</div>
</div>
<div mhtn="row">
<div mhtn="col xs-100 sm-100 md-50">
<h1><u>Editor</u></h1>
</div>
<div mhtn="col xs-100 sm-100 md-50">
<h1><u>Preview</u> (Markdown syntax)</h1>
</div>
</div>
<div mhtn="row">
<div mhtn="col xs-100 sm-100 md-50">
<textarea id="id_text" rows="30" style="width:100%" name="text">
# ตวใหญ h1
## ตวใหญ h2
วใหญ h2 อกแบบ
-------------
### ตวใหญ h3
#### ตวใหญ h4
__ตวหนา 1__ _ตวเอยง 1_
**ตวหนา 2** *ตวเอยง 2*
![รป](http://getexpensy.com/static/images/logo_144.png) <<--
[ลงไปหนาแรก](http://everyday.in.th/) <<-- ทำล
---------
รายการเปนขอๆ
* ขอ 1
* ขอ 2
* ขอ 3
* ขอ 3.1 (เวน 4 spaces ขางหนา)
* ขอ 3.2
* ขอ 3.2.1 (เวน 4*2 spaces ขางหนา)
</textarea>
</div>
<div mhtn="col xs-100 sm-100 md-50">
<div id="preview"></div>
</div>
</div>
</div>
<nav id="footer" mhtn="container flex">
<div mhtn="row">
<div mhtn="col xs-100">
<small>
[CC] 2015 <a href="http://everyday.in.th">everyday.in.th</a></a>
</small>
</div>
</div>
</nav>
<script src="jquery.min.js"></script>
<script src="markdown.js"></script>
<script>
function Editor(input, preview) {
this.update = function () {
preview.innerHTML = markdown.toHTML(input.value);
};
input.editor = this;
this.update();
}
var ggId = function (id) { return document.getElementById(id); };
new Editor(ggId("id_text"), ggId("preview"));
$('#id_text').on('keyup', function(e) {
new Editor(ggId("id_text"), ggId("preview"));
});
</script>
</body>
</html>

5
content/media/2015/05/markdown-preview/jquery.min.js vendored

File diff suppressed because one or more lines are too long

11
content/media/2015/05/markdown-preview/manhattan.css

@ -0,0 +1,11 @@
/*!
* Manhattan - A clean, lightweight and customisable CSS grid.
* Version: 1.0
* Url: http://www.adchsm.me/manhattan/
* Author: Adam Charles Smith
* Author url: http://www.adchsm.me/
* License: MIT
* License url: http://www.adchsm.me/manhattan/license.txt
*/
html,body,[mhtn]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}[mhtn*=container]{margin-left:auto;margin-right:auto;max-width:1200px;padding-left:15px;padding-right:15px}[mhtn*=container][mhtn*=flex]{max-width:none}[mhtn*=container][mhtn*=edge]{max-width:none;overflow:hidden;padding-left:0;padding-right:0}[mhtn*=row]{margin-left:-15px;margin-right:-15px}[mhtn*=row]:before,[mhtn*=row]:after{content:" ";display:table}[mhtn*=row]:after{clear:both}[mhtn*=col]{padding-left:15px;padding-right:15px;float:left}html[dir=rtl] [mhtn*=col]{float:right}[mhtn*=xs-10]{width:10%}[mhtn*=xs-20]{width:20%}[mhtn*=xs-30]{width:30%}[mhtn*=xs-40]{width:40%}[mhtn*=xs-50]{width:50%}[mhtn*=xs-60]{width:60%}[mhtn*=xs-70]{width:70%}[mhtn*=xs-80]{width:80%}[mhtn*=xs-90]{width:90%}[mhtn*=xs-100]{width:100%}[mhtn*=xs-33]{width:33.33%}[mhtn*=xs-66]{width:66.67%}[mhtn*=xs-25]{width:25%}[mhtn*=xs-75]{width:75%}@media (min-width:600px){[mhtn*=sm-10]{width:10%}[mhtn*=sm-20]{width:20%}[mhtn*=sm-30]{width:30%}[mhtn*=sm-40]{width:40%}[mhtn*=sm-50]{width:50%}[mhtn*=sm-60]{width:60%}[mhtn*=sm-70]{width:70%}[mhtn*=sm-80]{width:80%}[mhtn*=sm-90]{width:90%}[mhtn*=sm-100]{width:100%}[mhtn*=sm-33]{width:33.33%}[mhtn*=sm-66]{width:66.67%}[mhtn*=sm-25]{width:25%}[mhtn*=sm-75]{width:75%}}@media (min-width:900px){[mhtn*=md-10]{width:10%}[mhtn*=md-20]{width:20%}[mhtn*=md-30]{width:30%}[mhtn*=md-40]{width:40%}[mhtn*=md-50]{width:50%}[mhtn*=md-60]{width:60%}[mhtn*=md-70]{width:70%}[mhtn*=md-80]{width:80%}[mhtn*=md-90]{width:90%}[mhtn*=md-100]{width:100%}[mhtn*=md-33]{width:33.33%}[mhtn*=md-66]{width:66.67%}[mhtn*=md-25]{width:25%}[mhtn*=md-75]{width:75%}}@media (min-width:1200px){[mhtn*=lg-10]{width:10%}[mhtn*=lg-20]{width:20%}[mhtn*=lg-30]{width:30%}[mhtn*=lg-40]{width:40%}[mhtn*=lg-50]{width:50%}[mhtn*=lg-60]{width:60%}[mhtn*=lg-70]{width:70%}[mhtn*=lg-80]{width:80%}[mhtn*=lg-90]{width:90%}[mhtn*=lg-100]{width:100%}[mhtn*=lg-33]{width:33.33%}[mhtn*=lg-66]{width:66.67%}[mhtn*=lg-25]{width:25%}[mhtn*=lg-75]{width:75%}}@media (min-width:1500px){[mhtn*=xl-10]{width:10%}[mhtn*=xl-20]{width:20%}[mhtn*=xl-30]{width:30%}[mhtn*=xl-40]{width:40%}[mhtn*=xl-50]{width:50%}[mhtn*=xl-60]{width:60%}[mhtn*=xl-70]{width:70%}[mhtn*=xl-80]{width:80%}[mhtn*=xl-90]{width:90%}[mhtn*=xl-100]{width:100%}[mhtn*=xl-33]{width:33.33%}[mhtn*=xl-66]{width:66.67%}[mhtn*=xl-25]{width:25%}[mhtn*=xl-75]{width:75%}}[mhtn*=clear]:before,[mhtn*=clear]:after{content:" ";display:table}@media (max-width:599px){[mhtn*=clear][mhtn*=xs]:after{clear:both}}@media (min-width:600px) and (max-width:899px){[mhtn*=clear][mhtn*=sm]:after{clear:both}}@media (min-width:900px) and (max-width:1199px){[mhtn*=clear][mhtn*=md]:after{clear:both}}@media (min-width:1200px) and (max-width:1499px){[mhtn*=clear][mhtn*=lg]:after{clear:both}}@media (min-width:1500px){[mhtn*=clear][mhtn*=xl]:after{clear:both}}

1725
content/media/2015/05/markdown-preview/markdown.js

File diff suppressed because it is too large Load Diff

193
content/media/2015/05/markdown-preview/style.css

@ -0,0 +1,193 @@
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/**
* General
*/
html {
font-size: 15px;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
color: rgba(0, 0, 0, 0.87);
}
textarea {
color: #4D4D4D;
font: 14px/16px "Lato", sans-serif;
padding: 5px !important;
width: 100%;
}
div#preview {
background: rgba(0, 0, 0, 0.1);
padding: 5px;
}
a {
text-decoration: none;
color: #6E88C2;
}
a:hover {
text-decoration: none;
color: #5570AB;
}
small, .small {
font-size: 85%;
}
code {
background-color: #fbfbfb;
border-radius: 2px;
padding: 4px 8px;
margin: 0px 4px;
color: rgba(0, 0, 0, 0.54);
}
pre {
background-color: #fbfbfb;
border-radius: 2px;
padding: 10px;
margin: 10px 0 20px 0;
color: rgba(0, 0, 0, 0.54);
}
/**
* Image
*/
img.responsive {
max-width: 100%;
height: auto;
}
#image {
background-image: url( '../images/manhattan-banner.jpg' );
background-position: center center;
background-size: cover;
height: 300px;
position: relative;
}
@media (min-width: 900px) {
#image {
height: 400px;
}
}
#logo {
color: white;
font-weight: 600;
margin-top: -0.66em;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
font-size: 50px;
text-shadow: 0px 0px 2px rgba(81, 99, 144, 0.22);
}
@media (min-width: 480px) {
#logo {
font-size: 75px;
}
}
@media (min-width: 600px) {
#logo {
font-size: 100px;
}
}
@media (min-width: 900px) {
#logo {
font-size: 125px;
}
}
@media (min-width: 1200px) {
#logo {
font-size: 150px;
}
}
img.bordered {
max-width: 100%;
height: auto;
padding: 5px;
border: 1px solid #f2f2f2;
border-radius: 1px;
}
/**
* Titles
*/
h1 {
color: #F48BAE;
margin-top: 40px;
font-weight: 400;
margin-bottom: 40px;
}
h3 {
font-weight: 400;
}
/**
* About
*/
/**
* Changelog
*/
.version-release {
margin-bottom: 40px;
}
.version-release:last-of-type {
margin-bottom: 0;
}
.version-release h3 {
margin-bottom: 0px;
}
.version-release p:first-of-type {
margin-top: 0px;
}
/**
* License
*/
.license {
margin-top: 40px;
}
/**
* Footer menu
*/
#footer {
margin: 40px 0;
text-align: center;
color: rgba(0, 0, 0, 0.54);
}
/**
* Demo
*/
.demo [mhtn*="col"] {
background-color: #f4f4f4;
min-height: 50px;
border-left: 15px solid white;
border-right: 15px solid white;
margin-top: 15px;
margin-bottom: 15px;
}

1
content/pages/misc.md

@ -5,3 +5,4 @@ Things which are fun to fool around.
* [Color Test](/media/2015/03/color-test/)
* [SVG editor](/media/2015/03/svg-edit-2.7/) [svg-edit project page](https://code.google.com/p/svg-edit/)
* [Mardown Preview](/media/2015/05/markdown-preview/)

Loading…
Cancel
Save