.md ?? .markdown ?? คืออะไรกันนะ

.md ?? .markdown ?? คืออะไรกันนะ

มาถึงบทความแรกกันแล้วเย่ ก่อนที่จะเขียนบทความใน Blog ของเรา (Jekyll) ได้นั้นเราก็ต้องมาทำความรู้จักกับเจ้า Markdown กันก่อน เพราะต้องใช้ความสามารถของ Markdown ในการเขียนบทความนั้นเอง เพื่อน ๆ ที่ใช้ Git กันคงต้องเคยเห็นเจ้าไฟล์ที่ชื่อ README.md ผ่านตากันบ้างมาแล้ว ถ้าสังเกตุดี ๆ นามสกุลของมันคือ .md น้้นแหละฮะทั่นผู้ชม มันก็คือเจ้า Markdown เจ้าภาพของเราในบทความนี้

Markdown เป็น text-to-HTML ก็คือมันจะทำการแปลง Syntax ของ Markdown ไปเป็นรูปแบบ HTML ให้เรานั้นเอง อ่าวแล้วทำไมไม่เขียน HTML ขึ้นมาตรง ๆ เลยละ ก็เพราะว่าเจ้า Markdown เป็นรูปแบบที่เข้าใจได้ง่ายต่อการอ่านและเขียน นั้นเอง

มาดูตัวอย่างการใช้งานคร่าว ๆ กัน

A First Level Header
====================

A Second Level Header
---------------------

Now is the time for all good men to come to the aid of their country. This is just a regular paragraph.

The quick brown fox jumped over the lazy dog's back.

### Header 3

> This is a blockquote.
> 
> This is the second paragraph in the blockquote.
>
> ## This is an H2 in a blockquote

ผลลัพธ์เมื่อทำการแปลงเป็น HTML

<h1>A First Level Header</h1>

<h2>A Second Level Header</h2>

<p>Now is the time for all good men to come tothe aid of their country. This is just a regular paragraph.</p>

<p>The quick brown fox jumped over the lazy dog's back.</p>

<h3>Header 3</h3>

<blockquote>
    <p>This is a blockquote.</p>

    <p>This is the second paragraph in the blockquote.</p>

    <h2>This is an H2 in a blockquote</h2>
</blockquote>


เอาละมาดูการใช้งานเบื่องต้นกันเถอะ



การเน้นข้อความ ใช้เครื่องหมาย _ หรือ * ครอบข้อความที่ต้องการเน้น

Some of these words *are emphasized*.
Some of these words _are emphasized also_.

Use two asterisks for **strong emphasis**.
Or, if you prefer, __use two underscores instead__.

Some of these words are emphasized. Some of these words are emphasized also.

Use two asterisks for strong emphasis. Or, if you prefer, use two underscores instead.



ลิสรายการ (List) ใช้เครื่องหมาย *, +, หรือ - แต่ถ้าต้องการตัวเลขเรียงลำดับให้ใช้ตัวเลขตามด้วยจุด เช่น 1. หรือ 2.

*   Candy.
*   Gum.
*   Booze.

+   Candy.
+   Gum.
+   Booze.

-   Candy.
-   Gum.
-   Booze.

1.  Red
2.  Green
3.  Blue
  • Candy.
  • Gum.
  • Booze.

  • Candy.
  • Gum.
  • Booze.

  • Candy.
  • Gum.
  • Booze.
  1. Red
  2. Green
  3. Blue


การสร้างลิงค์ (Link) ใช้ [] ครอบข้อความ และใช้ () ครอบลิงค์

This is an [example link](https://doopdip.me/).

This is an example link.



แสดงรูปภาพ (Image) คล้าย ๆ เหมือนการสร้างลิงค์คือใช้ [] ครอบชื่อรูป และใช้ () ครอบ path ของรูป ที่เพิ่มขึ้นมาก็คือต้องใส่ ! ไว้หน้าสุด

![My cat](/assets/images/posts/what-is-markdown/cat.jpg)

My cat



แทรก code ระหว่างข้อความ (Code) โดยใช้ `` ครอบข้อความ

I strongly recommend against using any `<blink>` tags.

I wish SmartyPants used named entities like `&mdash;`
instead of decimal-encoded entites like `&#8212;`.

I strongly recommend against using any <blink> tags.

I wish SmartyPants used named entities like &mdash; instead of decimal-encoded entites like &#8212;.



เป็นไงกันบ้างงงง ง่ายใช่ไหมล่า ถ้าอยากศึกษาเพิ่มเติม ศึกษาได้จาก ลิงค์นี้ ได้เลยมีอะไรให้เล่นอีกเพียบ ฮี่ ๆ ๆ ๆ

แหล่งอ้างอิง

comments powered by Disqus