|
|
<!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://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> |
