ภาษา Markdown บน mdBook

ข้อความ และการจัดย่อหน้า

ข้อควาามจะแสดงตามที่พิมพ์ไป การเว้นบรรทัดจะต้องเว้นว่าง 1 บรรทัด หรือใส่ช่องว่าง 2 ช่อง ต่อท้ายบรรทัดแรก เช่น "..ท้ายบรรทัดแรก  "

ข้อความแรก
แต่ขึ้นบรรทัดใหม่ครั้งเดียวไม่ได้  
ท่านสามารถเว้นบรรทัดได้ เมื่อมีช่องว่าง 2 ช่องต่อท้ายในบรรทัดข้างบน (Soft break)

หรือจะขึ้นบรรทัดใหม่เพิ่มอีกครั้งก็ได้ (Hard break)

ข้อความแรก แต่ขึ้นบรรทัดใหม่ครั้งเดียวไม่ได้
ท่านสามารถเว้นบรรทัดได้ เมื่อมีช่องว่าง 2 ช่องต่อท้ายในบรรทัดข้างบน (Soft Break)

หรือจะขึ้นบรรทัดใหม่เพิ่มอีกครั้งก็ได้ (Hard Break)

หัวข้อ

การแสดงหัวข้อ ให้ใช้เครื่องหมาย # หน้าข้อความที่ต้องการ หากมี # หลายอัน ขนาดตัวอักษรจะเล็กลงเรื่อยๆ
หรือใช้เครื่องหมาย --- ในบรรทัดถัดมา แทน ## ก็ได้

# หัวข้อใหญ่สุด 
บทความในหัวข้อใหญ่สุด
## หัวข้อขนาดรอง
บทความในหัวข้อขนาดรอง

หัวข้อขนาดรองอีกวิธี
---
บทความในหัวข้อขนาดรองอีกวิธี
### หัวข้อเล็กๆ 
บทความในหัวข้อเล็กๆ
#### หัวข้อที่เล็กกว่า 
บทความในหัวข้อที่เล็กกว่า

หัวข้อใหญ่สุด

บทความในหัวข้อใหญ่สุด

หัวข้อขนาดรอง

บทความในหัวข้อขนาดรอง

หัวข้อขนาดรองอีกวิธี

บทความในหัวข้อขนาดรองอีกวิธี

หัวข้อเล็กๆ

บทความในหัวข้อเล็กๆ

หัวข้อที่เล็กกว่า

บทความในหัวข้อที่เล็กกว่า

ลักษณะตัวอักษร

สามารถสร้าง code, emoji, ตัวหนา, ตัวเอียง, ขีดเส้นใต้ และขีดทับข้อความ ได้

นี่คือ code `## ไม่ใช่หัวข้อ`

นี่คือ _ตัวเอียง_

นี่คือ __ตัวหนา__

นี่ก็*ตัวเอียง*อีกวิธี

นี่ก็**ตัวหนา**อีกวิธี

_สามารถแทรก**ตัวหนา**ในตัวเอียง_

**หรือแทรก _ตัวเอียง_ ในตัวหนาก็ได้**

_และสามารถ~~ขีดทับ **ตัวหนา** ภายใน~~ข้อความเอียงก็ได้_

แต่เครื่องหมาย_และ__ต้องมีเว้นวรรค__ก่อนและหลัง_ถึงจะใช้ได้

นี่คือ <u>การขีดเส้นใต้</u> ด้วย HTML

นี่คือ code ## ไม่ใช่หัวข้อ

นี่คือ ตัวเอียง

นี่คือ ตัวหนา

นี่ก็ตัวเอียงอีกวิธี

นี่ก็ตัวหนาอีกวิธี

สามารถแทรกตัวหนาในตัวเอียง

หรือแทรก ตัวเอียง ในตัวหนาก็ได้

และสามารถ~~ขีดทับ ตัวหนา ภายใน~~ข้อความเอียงก็ได้

แต่เครื่องหมาย_และ__ต้องมีเว้นวรรค__ก่อนและหลัง_ถึงจะใช้ได้

นี่คือ การขีดเส้นใต้ ด้วย HTML

การซ่อนข้อความ

หากต้องการบันทึกข้อความไว้ แต่ไม่ต้องการแสดงผล ให้ใช้ <!-- และ --> ครอบไว้

การเดินทาง และ
<!-- เอาไว้ค่อยทำต่อวันพรุ่งนี้ -->

บทที่ 2

การเดินทาง และ

บทที่ 2

Blockquote

สร้างกล่อง Quote ด้วยเครื่องหมาย > (อย่าลืม "  " ต่อท้ายบรรทัด หากจะขึ้นบรรทัดใหม่)

## โคลงสี่สุภาพ
> เสียงลือเสียงเล่าอ้าง     อันใด พี่เอย  
> เสียงย่อมยอยศใคร     ทั่วหล้า
>
> สองเขือพี่หลับใหล     ลืมตื่น ฤาพี่

> สองพี่คิดเองอ้า     อย่าได้ ถามเผือ
> > ลิจิตพระลอ
> > > โดย
> > > > พระโหราธิบดี

โคลงสี่สุภาพ

เสียงลือเสียงเล่าอ้าง อันใด พี่เอย
เสียงย่อมยอยศใคร ทั่วหล้า

สองเขือพี่หลับใหล ลืมตื่น ฤาพี่

สองพี่คิดเองอ้า อย่าได้ ถามเผือ

ลิจิตพระลอ

โดย

พระโหราธิบดี

รายการ

รายการ มี 2 ชนิด คือ เรียงลำดับ และไม่มีลำดับ, ชนิดเรียงลำดับ ระบบจะเรียงเลขให้อัตโนมัติ

* สุนัข
    * แมว
        * ไก่
- กุ้ง
    - หอย
        - ปู
+ ส้ม
    + องุ่น
        + ชมพู่
1. นกแก้ว
1. ปลาทอง
    1. แกะ
    1. สิงโต
  • สุนัข
    • แมว
      • ไก่
  • กุ้ง
    • หอย
      • ปู
  • ส้ม
    • องุ่น
      • ชมพู่
  1. นกแก้ว
  2. ปลาทอง
    1. แกะ
    2. สิงโต

การอ้างอิง URL หรือไฟล์เอกสารอื่น

ขอบคุณที่ใช้ [mdBook](https://github.com/rust-lang/mdBook)

ขอบคุณ [ผู้เขียนทุกท่าน](contributors.md)

แสดง URL จริง : <https://www.rust-lang.org>.

กระโดด [ไปที่ ## End Of Page](#end-of-page)

กระโดด [ไปที่ ## รายการ](#รายการ) แต่ระวังสระและวรรณยุกต์ ด้านบนและด้านล่างอักษร

อ้างอิงจากท้ายหน้า [footer-url] ก็ได้

เปิดหน้าต่างใหม่ <a href="http://www.google.co.th" target="_blank">Google</a> ด้วย HTML

[footer-url]: http://www.google.co.th

ขอบคุณที่ใช้ mdBook

ขอบคุณ ผู้เขียนทุกท่าน

แสดง URL จริง : https://www.rust-lang.org

กระโดด ไปที่ ## End Of Page

กระโดด ไปที่ ## รายการ

เปิดหน้าต่างใหม่ Google ด้วย HTML

อ้างอิงจากท้ายหน้า footer-url ก็ได้

รูปภาพ

การเพิ่มรูปภาพ ทำได้ด้วยการเพิ่ม ที่อยู่ของไฟล์ เพียงเพิ่มเครื่องหมาย ! หน้า Link ของไฟล์รูปภาพ ในแฟ้มย่อยชื่อ images ที่อยู่ในแฟ้มเดียวกันกับไฟล์ markdown นั้นๆ เช่น ไฟล์ ../some/test.md อ้างอิงรูป ../some/images/picture.jpg ด้วย ![รูปภาพ](images/picture.jpg)เป็นต้น

![Red Heart](images/heart.svg)

จะกลายเป็นภาษา HTML ดังนี้

<p><img src="images/heart.svg" alt="Red Heart" /></p>

และแสดงผลเป็น

Red Heart

เราสามารถแนบ ที่อยู่ของไฟล์ จากบริเวณอื่นได้ เช่น

![footer-image]

[footer-image]: images/star.svg

footer-image

เส้นแบ่งแนวนอน

สร้างเส้นแนวนอนด้วยการ ขึ้นบรรทัดใหม่ร่วมกับเครื่องหมาย --- (หากไม่ขึ้นบรรทัดใหม่ก่อน จะกลายเป็นหัวข้อ ##)

ข้อความแรก

---
ถ้าไม่เว้นบรรทัด ก่อน `---` จะกลายเป็นหัวข้อเช่นเดียวกับ `##`
---
ไม่มีเส้นแนวนอน

ข้อความแรก

ถ้าไม่เว้นบรรทัด ก่อน --- จะกลายเป็นหัวข้อเช่นเดียวกับ ##

ไม่มีเส้นแนวนอน

กล่องภาษา

สร้างกล่องแสดงภาษาคอมพิวเตอร์ พร้อมการให้สีคำสำคัญ ด้วยเครื่องหมาย " ``` " ครอบไว้
พร้อมระบุภาษาที่อยู่ในกล่อง

    ## HTML
    ```html
    <h2>heading</h2>
    ```

HTML

<h2>heading</h2>

Check list

สร้างรายการ ที่สามารถแสดงการ เลือก หรือ ไม่เลือก ได้

- [ ] ซื้อปากกา
- [x] ส่งจดหมาย
1. [ ] ปะยาง
1. [x] ซักผ้า
  • ซื้อปากกา
  • ส่งจดหมาย
  1. ปะยาง
  2. ซักผ้า

บทความอ้างอิง

สร้างบทความอ้างอิงท้ายหน้า พร้อมหมายเลขอัตโนมัติ โดยเมื่อคลิกที่ข้อความ จะกระโดดไปที่ การอ้างอิงท้ายหน้า ทันที

ตัวอย่างของการแสดงเอกสารจาก องค์กรลับ[^note]

[^note]: องค์กรลับมีดแห่งลุ่มแม่น้ำโขง

ตัวอย่างของการแสดงเอกสารจาก องค์กรลับ1

1

องค์กรลับมีดแห่งลุ่มแม่น้ำโขง

ตาราง

สร้างตาราง ด้วยเครื่องหมาย | และ --- ประกอบเป็นตาราง

| Header1 | Header2 |
|---------|---------|
| abc     | def     |

|left      | middle    | right                         |
|:-        |:-:        |-:                             |
| Cat      | 123       | https://www.one.com           |
| Penquin  | 123456789 | https://www.one.two.three.com |
Header1Header2
abcdef
LeftMiddleRight
Cat123https://www.one.com
Penquin123456789https://www.one.two.three.com

การใช้ code จากไฟล์อื่น

สามารถใช้ code จากไฟล์อื่น มาแสดงในไฟล์ที่ต้องการได้

ไฟล์อื่น อ้างอิงตำแหน่งไฟล์ จากไฟล์ที่เรียกหา

{{#include another.md}}
{{#include another.md:2}}
{{#include another.md::10}}
{{#include another.md:2:}}
{{#include another.md:2:10}}
{{#include another.md:some-part}}

ไฟล์ another.md

ข้อความต่างๆ

<!-- ANCHOR: some-part -->
ข้อความที่ต้องการเอาไปใช้
<!-- ANCHOR_END: some-part -->

ข้อความต่างๆ
  • บรรทัดที่ 1: ใช้ข้อความทั้งหมด จาก another.md มาใส่แทน
  • บรรทัดที่ 2: ใช้ข้อความ เริ่มจากบรรทัดที่ 2 เป็นต้นไป จาก another.md มาใส่แทน
  • บรรทัดที่ 3: ใช้ข้อความ เริ่มจากบรรทัดแรก ถึงบรรทัดที่ 10 จาก another.md มาใส่แทน
  • บรรทัดที่ 4: ใช้ข้อความ เฉพาะบรรทัดที่ 2 จาก another.md มาใส่แทน
  • บรรทัดที่ 5: ใช้ข้อความ เฉพาะบรรทัดที่ 2 ถึงบรรทัดที่ 10 จาก another.md มาใส่แทน
  • บรรทัดที่ 6: ใช้ข้อความ ระหว่างบรรทัดที่มี ANCHOR: some-part และบรรทัดที่มี ANCHOR_END: some-part จาก another.md มาใส่แทน

การใช้ภาษา HTML ร่วมกับ mdBook

ท่านสามารถใช้ class left,right,hidden และ warning ได้

left และ right เทียบเท่ากับ float: left; และ float: right; ตามลำดับ

Yellow Star 
<img class="left" src="images/star.svg" alt="Yellow Star">
    ```text
    <img class..
    ..
    </div>
    ```
<img class="right" src="images/heart.svg" alt="Red Heart">
<div class="hidden">ท่านมองไม่เห็นเราหรอก..</div>
<div class="warning">

    บทความนี้ จะมีเครื่องหมายเตือน  
    อยู่ทางด้านซ้าย
</div>
Red Heart 
บทความนี้ จะมีเครื่องหมายเตือน  
อยู่ทางด้านซ้าย

การแทรก Icon จาก FontAwesone

mdBook ใช้ FontAwesome version 4.7 ในการสร้าง Icon ต่างๆ
ท่านสามารถแทรก Icon ใน FontAwesome Icons ได้
โดยเขียนในรูปแบบ <i class="fa fa-XXXXX"></i> และแทนที่ XXXXX ด้วยชื่อ icon

แสดงปุ่มค้นหา  
<i class="fa fa-search"></i> ค้นหา

แสดงปุ่มค้นหา
ค้นหา

End Of Page

สำหรับทดสอบการอ้างอิง