Markdown শিখুন বাংলায়!

ওয়েব ডেভেলপমেন্ট
, ,
1

markdown-text
markdown-text5334×3000 146 KB

Markdown কি?

Markdown মূলত HTML এর মতোই একটা Markup Language। এটি ফরম্যাটেট টেক্সট তৈরি করার জন্য ব্যবহার করা হয়। এটি বর্তমানে পৃথিবীর অন্যতম জনপ্রিয় একটি Markup Language। ২০০৪ সালে John Gruber এটি তৈরি করেছিলেন।

এর কিছু গুণাবলি উল্লেখ করি:

  • প্রথমত এটি simple এবং lightweight।
  • এটি শেখা এবং লেখা খুবই সহজ।
  • HTML, PDF সহ আরো কিছু ফরম্যাটে সহজে রূপান্তর করা যায়।
  • Readability এবং সহজেই ব্যবহারযোগ্য।

Markdown এর ব্যবহার ক্ষেত্র:

  • Readme file গুলোতে। যেমন: Github।
  • বিভিন্ন প্রজেক্টের Documentation লেখার জন্য।
  • বিভিন্ন Static Site তৈরি করার জন্য।
  • Forum এবং Blog Post লেখার জন্য। (যেমন: BDIT)
  • বিভিন্ন Note Taking Tool এ Markdown এর মাধ্যমে নোট গ্রহণ করা যায়।

Markdown নিয়ে খেলার জায়গা:

Markdown লেখার জন্য প্রচুর Text Editor এবং Platform রয়েছে।

  • VS Code এ Markdown Al in One Extension Install করে Live Preview দেখে Markdown Code লিখতে পারেন।

    image
    image671×213 12.9 KB

  • Online Markdown Editor ব্যবহার করে লিখতে পারেন।

  • বিভিন্ন ওয়েবসাইটে গিয়ে লিখতে পারেন।

    • GitHub (Readme.md ফাইল)
    • GitLab
    • Notion ইত্যাদি

Markdown Syntax

Markdown এ দুই ধরনের Syntax রয়েছে।

  • Basic Syntax : সহজে লেখা যায় এবং সকল Markdown Editor সাপোর্ট করে।

  • Extended Syntax: দিন যতো এগুচ্ছে, বেসিক সিনট্যাক্স গুলোর বাইরেও আরো কিছু ফিচারের প্রয়োজন হচ্ছে। আর এই প্রয়োজন পূরণের জন্য কিছু কিছু Editor বা Platform এ বাড়তি কিছু Syntax এর ব্যবহার দেখা যায়। সেগুলোই মূলত Extended Syntax। এই Syntax গুলো সব Editor এ সাপোর্ট করে না। Editor ভেদে এই Syntax গুলোর style ভিন্ন হয়।

Basic Markdown Syntax সম্পর্কে জানি:

Heading

HTML এর মতো এখানেও ৬ লেভেলের Heading পাওয়া যায়। কোনো লেখার আগে # sign ইউজ করলে সেটা Heading হিসেবে বিবেচিত হয়।

# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6

Output :

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

বিকল্প সিনট্যাক্স: আমরা চাইলে Heading 1 এবং 2 কে অন্য Syntax এ লিখতে পারি।

Heading 1
============

Heading 2
-----------

দরকারি আলাপ: # এর পর space না দিলে কিন্তু syntax কাজ করবে না।

Paragraph

Paragraph লেখার জন্য কোনো syntax এর প্রয়োজন নেই। সাধারণভাবে লেখা লিখলে সেটা paragraph হিসেবে বিবেচিত হয়।

This is a paragraph.
It is written in markdown.

Line Break

লাইন ব্রেক করার জন্য লাইনের শেষে দুইটি space বা <br> tag ইউজ করা লাগবে।

Bold / Italic

কোন লেখার শুরু এবং শেষে ** sign ইউজ করলে সেটা Bold হয়ে যাবে।

**This is a bold text**

Output: This is a bold text

বিকল্প:

__This is a bold text__

লেখার শুরু এবং শেষে * sign দিলে সেই লেখা Italic হয়ে যাবে।

*This is a bold text*

Output: This is a bold text

বিকল্প:

_This is a bold text_

Strikethrough

~~ এই সাইন ব্যবহার করা হয়।

~~Deleted~~

Output: Deleted

দরকারি আলাপ: Sign গুলোর পরে space দেয়া যাবে না। space দিলে কাজ করবে না।

Code

``` Backtick sign শুরুতে এবং শেষে দিলে একটা Code Block তৈরি হয় যার মধ্যে লেখা গুলো কোড আকারে দেখাবে।
```php `
$name = Tushar;
$age = 16;

echo `Name : {$name} Age : {$age}`;

```
php লেখা হয়েছে কোডগুলো php তে লেখা সেটা বুঝানোর জন্য। যাতে আউটপুটে syntax গুলো php এর অনুসারে শো করে।
Output:

	$name = Tushar;
	$age = 16;

	echo `Name : {$name} Age : {$age}`;

Inline Code লেখার জন্য `` single Backtick sign ব্যবহার করতে হবে।
যেমন:

Use `console.log()` to print text.

Lists

Markdown এ HTML এর মতো Ordered এবং Unordered list তৈরি করা যায়।

Ordered List

1. Item 1
2. Item 2
   1. Sub Item 1
   2. Sub Item 2
3. Item 3

Unordered List

- Item 1
- Item 2
  - Sub Item 1
  - Sub Item 2
- Item 3

- এর স্থলে * এবং + ও ইউজ করা যাবে।

Blockquotes

Blockquote তৈরি করতে হলে > sign ইউজ করা লাগবে।

> This is a blockquote
> This is line 2

Output:

This is a blockquote
This is line 2

Nested করতে হলে > sign Double ইউজ করা লাগে।

> This is a blockquote
> This is line 2
>> Nested line
>> Nested line 2

Output:

This is a blockquote
This is line 2

Nested line
Nested line 2

Links

Markdown এ Link তৈরি করার syntax হচ্ছে []()।

[Visit BDIT](https://bdit.community)

Output: Visit BDIT

যদি দ্রুত কোন URL বা email address কে লিংকে পরিণত করতে চান তাহলে < > এটা ব্যবহার করা হয়।

<https://bdit.community>
<[email protected]>

Output:
https://bdit.community
[email protected]

Image

ছবি সংযোজন করার জন্য ![]() এই সিনট্যাক্স ব্যবহার করা হয়।
[] এর মধ্যে Image Alt Text এবং () এর মধ্যে ইমেইজ পাথ।

![BDIT Image](https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/1/1f4247570142e00eb8a6c2b3c8f002e58d926574.png)

Output:

BDIT Image
BDIT Image720×240 9.47 KB

আপনি চাইলে image এর মধ্যে "" quation mark এর মধ্যে Title দিতে পারেন।

![BDIT Image](https://bdit-community-public.s3.us-west-002.backblazeb2.com/original/2X/1/1f4247570142e00eb8a6c2b3c8f002e58d926574.png "BDIT Community Logo")

এবার নিচের ইমেইজটা hover করলে Title দেখতে পারবেন।

BDIT Image
BDIT Community Logo720×240 9.47 KB

Horizontal Rules

৩টি বা তার চাইতে বেশি (***), dashes (---), or underscores (___) দিয়ে Enter চাপলে Horizontal Rule তৈরি হবে।

---
****
_____

Output:

Horizontal Rule এর এবং পরে blank line রাখতে হবে যাতে সঠিকভাবে কাজ করে।

Extended Markdown Syntax সম্পর্কে জানি:

Tables

Markdown দিয়ে Table তৈরি করা খুবই সহজ। চলুন দেখি:

| Name    | Age | Country |
| ------- | --- | ------- |
| John    | 25  | USA    |
| Alice   | 22  | UK     |
| Bob     | 30  | Canada |

Output:

Name Age Country
John 25 USA
Alice 22 UK
Bob 30 Canada

Alignment

টেবিলের কলামের লেখাগুলোকে Center Align করার জন্য | :------: | এবং Right Align এর জন্য | -----: |

| Name  | Age | Country |
| ------- | :----: | ----:|
| John    | 25  | USA    |
| Alice   | 22  | UK     |
| Bob     | 30  | Canada |

Checkbox

Markdown দিয়ে checkbox তৈরি করা যায় [ ] এবং [x] এর মাধ্যমে।

[ ] Undone
[x] Done

Output:
Undone
Done

Highlights

কোনো লেখাকে Highlight করতে চাইলে, লেখার শুরু ও শেষে == Double Equal sign দিতে হবে।

This is a ==marked== text.

Output:
This is a ==marked== text.

Subscript / Superscript

কোন word এর শুরু ও শেষে ~ sign দিলে সেটি subscript আকারে দেখাবে। আর ^ sign ব্যবহার করলে superscript হবে।

H~2~O = Water

(a + b)^2^ = a^2^ + 2ab + b^2^

Output:
H~2~O = Water

(a + b)^2^ = a^2^ + 2ab + b^2^

এই সিনট্যাক্স গুলো জানা থাকলে Markdown নিয়ে খুব ভালোভাবে কাজ করতে পারবেন ইনশাআল্লাহ।

শেষের আলাপ:

Lightweight কিছু Markup Language আছে যেগুলো মূলত Markdown এর Superset, তারা Markdown এর Basic Syntax এর সাথে নিজেদের মতো আরো Element (যেমন: Tables, code blocks, syntax highlighting, URL auto-linking, footnotes ইত্যাদি) যোগ করে আরো উন্নত language হিসেবে প্রকাশ পেয়েছে। যেমন: CommonMark, GitHub Flavored Markdown (GFM) ইত্যাদি। অধিকাংশ Markdown Application এই Lightweight Language গুলো থেকেই যেকোনটা ব্যবহার করে থাকে।

সংযোজন-১: উপরে যে Syntax গুলো নিয়ে আলোচনা করেছি এর বাইরে আরো কিছু Extended Syntax রয়েছে। যেমন: Footnotes, Heading IDs, Definition Lists, Emoji ইত্যাদি। এগুলো সম্পর্কে জানার আগ্রহ থাকলে Markdown Guide এ গিয়ে পড়তে পারেন।

সংযোজন-২: যারা পুরোটা পড়েছেন তারা নিশ্চয়ই খেয়াল করেছেন আউটপুটে কিছু কোড কাজ করছে না। ওইযে উপরে বললাম, extended কোড গুলো সব platform বা editor এ কাজ করে না। যেমন bdit তে কিছু কিছু syntax কাজ করছে না। তাই কোড গুলো অন্য কোনো online editor এ নিয়ে আউটপুট দেখলে নিশ্চিত হতে পারবেন। ধন্যবাদ সবাইকে।

6 Likes