အခန်း ၄ :: Markdown
Markdown ကတော့ lightweight markup language တစ်ခု ဖြစ်ပြီး John Gruber နှင့် Aaron Swartz က ၂၀၀၄ မှာ ဖန်တီးခဲ့တာပါ။ Markdown ဟာ blog, forum , documentation, readme စတာတွေကို လွယ်လင့်တကူ ရေးသားနိုင်အောင် ကူညီပေးသည့် markup language တစ်ခုပါ။
Developer တစ်ယောက် အနနဲ့ မဖြစ်မနေ Markdown ကို သိထားသင့်တယ်။ Markdown ရဲ့ အားသာချက်က HTML ကို လွယ်လင့် တကူ ပြန်ပြောင်းနိုင်တာပါ။ ပုံမှန် HTML နဲ့ ရေးသည့် အခါမှာ စာတွေ အများကြီး ရေးရပေမယ့် Markdown က ရေးရတာ လျော့ချပေးတယ်။ အခု စာအုပ်ဟာလည်း Markdown နဲ့ ရေးသားထားပြီးတော့ HTML, PDF,Epub တို့ကို ပြန်ထုတ်ထားတာပါ။
Example markdown လေးကို ကြည့်ရအောင်
# Header
## Header 2
This is paragrapth with **bold** and *italic*.
[Link](https://www.google.com) to Google.
![Sample](<./images/file.png>)
အဲဒီ code ကို HTML ပြန်ပြောင်းလိုက်ရင် အောက်ပါ လို မြင်ရပါလိမ့်မယ်။
<h1>Header</h1>
<h2>Header 2</h2>
<p>This is paragrapth with <strong>bold</strong> and <em>italic</em>.</p>
<p><a href="https://www.google.com">Link</a> to Google.</p>
<img src="./images/file.png" alt="Sample" />
ဆိုပြီး ထွက်လာပါမယ်။ ပုံမှန် HTML ရေးနေတာထက် ပိုပြီး မြန်မြန်ဆန်ဆန် ရေးလို့ရသည့် အတွက် document တွေ ရေးသည့် အခါမှာ အသုံးဝင်ပါတယ်။ Github, Gitlab တို့မှာ README.md ဆိုသည့် text file ကို HTML အနေနဲ့ repo ရဲ့ README အနေနဲ့ ဖော်ပြပေးပါတယ်။ ဒါကြောင့် Git Repo တွေမှာ README.md ကို ထည့်သွင်းပြီး markdown နဲ့ ရေးသားပါတယ်။
Syntax
Header
Markdown မှာ header အတွက်
# This is an H1
## This is an H2
### This is an H3
###### This is an H6
နောက်ပြီးတော့
This is H1
==========
This is H2
----------
ဆိုပြီးလည်း သုံးနိုင်ပါတယ်။
Blockquotes
Markdown မှာ blockquote အတွက် >
ကို အသုံးပြုပြီး ရေးပါတယ်။
> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
> consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
> Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
>
> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
> id sem consectetuer libero luctus adipiscing.
အဲဒီလို စာဆိုရင်တော့
This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.
Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.
အခုလိုမျိုး paragraph အထဲကို ဝင်သွားသည့် ပုံစံ မျိုးကို မြင်ရပါလိမ့်မယ်။ Multiple level အတွက် > >
ကို အသုံးပြုနိုင်ပါတယ်။
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.
ဆိုရင်တော့
This is the first level of quoting.
This is nested blockquote.
Back to the first level.
လိုမျိုး မြင်ရမှာပါ။
List
List အတွက် markdown မှာ လွယ်လွယ်ကူကူ ရေးနိုင်ပါတယ်။ Unorder list အတွက်
* Red
* Green
* Blue
+ Red
+ Green
+ Blue
- Red
- Green
- Blue
*
, +
, -
ကြိုက်တာကို အသုံးပြုနိုင်ပါတယ်။
- Red
- Green
- Blue
ဆိုပြီး unorder list နဲ့ ပြပေးပါလိမ့်မယ်။
Ordered list အတွက်
1. Bird
2. McHale
3. Parish
ဆိုပြီး ရေးနိုင်ပါတယ်။
* Bird
* Magic
ဆိုသည့် list ဟာ
<ul>
<li>Bird</li>
<li>Magic</li>
</ul>
Code Blocks
Markdown မှာ အကြိုက်ဆုံး feature တစ်ခုကတော့ code blocks ပါပဲ။ ပုံမှန် code ရေးသည့်အခါမှာ HTML မှာ pre tag တွေ နဲ့ အသုံးပြုရပေမယ့် markdown မှာတော့ လွယ်ကူပါတယ်။
This is normal paragraph:
This is code block
အခုလိုမျိုး tab ကိုထည့်လိုက်ရင်
<p>This is a normal paragraph:</p>
<pre><code>This is a code block.
</code></pre>
ဆိုပြီး generate လုပ်ပါလိမ့်မယ်။
နောက်တစ်မျိုးကတော့
```php
<?php
echo "hello";
အဲဒီမှာ code အတွက် \` ကို သုံးထားတာ တွေ့နိုင်ပါတယ်။ \`\`\` ဟာ code block ကို ရည်ညွှန်းပါတယ်။
\`\`\`php ဆိုရင်တော့ php code block ဖြစ်တယ် ဆိုပြီး ရည်ညွှန်းထားတာပါ။
အဲဒီ code ကို html ပြောင်းရင်တော့
```html
<pre><code class="php"> <?php
echo "hello";
</code></pre>
ဆိုပြီး ပြောင်းသွားပါမယ်။
အကယ်၍ code ကို echo
လိုမျိုး inline မှာ သုံးချင်ရင်တော့ `echo` ဆိုပြီး သုံးနိုင်ပါတယ်။ <code>echo</code>
အနေနဲ့ generate လုပ်ပေးပါလိမ့်မယ်။
Horizontal Rules
Markdown မှာ <hr>
ကို အသုံးပြုချင်ရင် ***
ကို အသုံးပြုနိုင်ပါတယ်။ အသုံးပြုနိုင်တာတွေ ကတော့
***
---
-----------
စတာတွေ ကို အသုံးပြုနိုင်ပါတယ်။
Links
HTML မှာလိုမျိုး URL ကို ချိတ်ချင်သည့် အခါမှာ <a href='link'>TEXT</a>
လိုမျိုး အတွက် Markdown မှာ အောက်ပါအတိုင်း ရေးနိုင်ပါတယ်။
This is [Text](http://example.com/) inline link.
အကယ်၍ tooltip ပေါ်ချင်သည့် အခါမှာ
[Text](http://example.com/ "HELLO World")
ပုံစံ ရေးနိုင်ပါတယ်။
အဲဒီ အခါမှာတော့
<a href="http://example.com/" title="HELLO WORLD">Text</a>
Bold and Italic
အထက်မှာ ပြောထားခဲ့ဖူးပါတယ်။ Bold အတွက်ကတော့
**bold**
ဆိုရင်
<b>bold</b>
ဆိုပြီး ပြောင်းပေးပါတယ်။
_italic_
ဆိုရင်
<i>italic</i>
Images
Markdown မှာ ပုံထည့်မယ် ဆိုရင်အောက်ပါ အတိုင်း ထည့်နိုင် ပါတယ်။
![Alt text](</path/to/img.jpg>)
![Alt text](</path/to/img.jpg "Optional title">)
ဆိုရင်
<img src="/path/to/img.jpg" alt="Alt text"/>
<img src="/path/to/img.jpg" alt="Alt text" title="Optional title" />
အကယ်၍ internet က url အသုံးပြုမယ်ဆိုရင်
![Alt text](<http://www.mywebsite.com/myimage.jpg>)
ဆိုရင်
<img src="http://www.mywebsite.com/myimage.jpg" alt="Alt text" />
Tool
Markdown ကို ပုံမှန် text editor တစ်ခုခု နဲ့ ရေးရင် ရပါတယ်။ သို့ပေမယ့် syntax highlighitng, (HTML, PDF, Doc) စသည် တို့ကို export လုပ်လို့ ရအောင် editor တွေကိုလည်း အသုံးပြုနိုင်ပါတယ်။
Editor တွေကတော့
Editor | Syntax Highlight | Preview | Export PDF | Export Doc | Export HTML |
---|---|---|---|---|---|
VS Code | O | O | Plugin | Plugin | Plugin |
iA Writer (Mac) | O | O | O | O | O |
Typora | O | O | O | O | O |
MarkdownPad (Windows) | O | O | O | x | O |
markdownmonster (Windows) | O | O | O | x | O |
Apostrophe (linux) | O | O | x | x | O |
အခု ဆိုရင်တော့ Markdown ကို သုံးပြီးတော့ README.md file ကို ရေးနိုင်ပါလိမ့်မယ်။