blogger
/
everyday-pelican
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

Add Markdown Preview

master
sipp11 10 years ago
parent
8717067971
commit
1152293d10
6 changed files with 2023 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
View File

File diff suppressed because one or more lines are too long

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

@ -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
View File

File diff suppressed because it is too large Load Diff

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

@ -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
Unescape View File

@ -5,3 +5,4 @@ Things which are fun to fool around.
* [Color Test](/media/2015/03/color-test/) * [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/) * [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/)

Write Preview
Loading…
Cancel
Save