মার্কডাউন প্লাগিন এবং এক্সটেনশন

মার্কডাউন প্লাগিন এবং এক্সটেনশন আপনাকে বেসিক সিনট্যাক্সের বাইরে ফিচার যোগ করতে দেয়, যা টেবিল, ফুটনোট, টাস্ক লিস্ট এবং আরও অনেক কিছু সক্ষম করে।

জনপ্রিয় মার্কডাউন প্রসেসর

Markdown-it

প্লাগিন ইকোসিস্টেম সহ একটি দ্রুত এবং এক্সটেন্সিবল মার্কডাউন পার্সার।

const md = require('markdown-it')();

// প্লাগিন সক্ষম করুন
md.use(require('markdown-it-footnote'))
  .use(require('markdown-it-abbr'))
  .use(require('markdown-it-emoji'));

const result = md.render('# Hello :smile:');

Remark

প্লাগিন দ্বারা পরিচালিত মার্কডাউন প্রসেসর, unified collective এর অংশ।

const remark = require('remark');
const html = require('remark-html');
const gfm = require('remark-gfm');

remark()
  .use(gfm)
  .use(html)
  .process('## Hello **world**!', (err, file) => {
    console.log(String(file));
  });

Marked

গতি এবং নমনীয়তার জন্য একটি লো-লেভেল মার্কডাউন কম্পাইলার।

const marked = require('marked');

// marked কনফিগার করুন
marked.setOptions({
  breaks: true,
  gfm: true,
  highlight: function(code, lang) {
    return hljs.highlight(code, { language: lang }).value;
  }
});

const html = marked.parse('# Heading');

অপরিহার্য প্লাগিন

টেবিল

মার্কডাউনে টেবিল সাপোর্ট যোগ করুন:

| Feature | Support |
|---------|---------|
| Tables  | ✅      |
| Syntax  | Easy    |

প্লাগিন: markdown-it-table, remark-gfm

ফুটনোট

আপনার ডকুমেন্টে ফুটনোট যোগ করুন:

এটি একটি বিবৃতি[^1] যার একটি রেফারেন্স প্রয়োজন।

[^1]: এটি ফুটনোট কন্টেন্ট।

প্লাগিন: markdown-it-footnote, remark-footnotes

টাস্ক লিস্ট

ইন্টারঅ্যাক্টিভ চেকবক্স:

- [x] সম্পূর্ণ টাস্ক
- [ ] অসম্পূর্ণ টাস্ক
- [ ] অন্য টাস্ক

প্লাগিন: markdown-it-task-lists, remark-gfm

ইমোজি

ইমোজি সাপোর্ট যোগ করুন:

আমি :heart: মার্কডাউন! :rocket:

প্লাগিন: markdown-it-emoji, remark-emoji

সিনট্যাক্স হাইলাইটিং

কোড ব্লক হাইলাইট করুন:

```javascript
function hello() {
  console.log("Hello!");
}

প্লাগিন: `highlight.js`, `prism.js`

## উন্নত প্লাগিন

### গাণিতিক সমীকরণ

LaTeX/KaTeX সমীকরণ রেন্ডার করুন:

```markdown
ইনলাইন গণিত: $E=mc^2$

ব্লক গণিত:
$$
\int_0^\infty e^{-x^2} dx = \frac{\sqrt{\pi}}{2}
$$

প্লাগিন:

• markdown-it-katex
• remark-math + rehype-katex
• markdown-it-texmath

ডায়াগ্রাম

Mermaid দিয়ে ডায়াগ্রাম তৈরি করুন:

```mermaid
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;

প্লাগিন: `mermaid`, `markdown-it-mermaid`

### বিষয়বস্তু সূচি

স্বয়ংক্রিয়ভাবে বিষয়বস্তু সূচি তৈরি করুন:

```markdown
[[toc]]

# সেকশন 1
## সাবসেকশন 1.1

# সেকশন 2

প্লাগিন: markdown-it-toc, remark-toc

ডেফিনিশন লিস্ট

ডেফিনিশন লিস্ট সাপোর্ট যোগ করুন:

Term 1
: Definition 1

Term 2
: Definition 2a
: Definition 2b

প্লাগিন: markdown-it-deflist

কন্টেইনার/অ্যাডমনিশন

কাস্টম ব্লক কন্টেইনার:

::: warning
এটি একটি সতর্কতা বার্তা
:::

::: tip
এটি একটি সহায়ক টিপস
:::

প্লাগিন: markdown-it-container, remark-custom-blocks

কোড এনহ্যান্সমেন্ট প্লাগিন

লাইন নাম্বার

কোড ব্লকে লাইন নাম্বার যোগ করুন:

const md = require('markdown-it')({
  highlight: function(str, lang) {
    // লাইন নাম্বার যোগ করুন
    return '<pre class="line-numbers"><code>' +
           md.utils.escapeHtml(str) +
           '</code></pre>';
  }
});

কোড টাইটেল

কোড ব্লকে টাইটেল যোগ করুন:

```js:example.js
console.log("Hello");

### কপি বাটন

ক্লিপবোর্ডে কপি করার ফাংশনালিটি যোগ করুন:

```javascript
document.querySelectorAll('pre code').forEach((block) => {
  const button = document.createElement('button');
  button.innerText = 'Copy';
  button.onclick = () => {
    navigator.clipboard.writeText(block.innerText);
  };
  block.parentNode.appendChild(button);
});

SEO এবং মেটাডেটা প্লাগিন

মেটা ট্যাগ

স্বয়ংক্রিয়ভাবে মেটা ট্যাগ তৈরি করুন:

const meta = require('remark-meta');

remark()
  .use(meta)
  .process(markdown, (err, file) => {
    console.log(file.data.meta);
  });

Open Graph

Open Graph ট্যাগ তৈরি করুন:

---
og:title: আমার আর্টিকেল
og:description: আর্টিকেল বিবরণ
og:image: /image.jpg
---

রিডিং টাইম

রিডিং টাইম গণনা করুন:

const readingTime = require('reading-time');

const stats = readingTime(markdownContent);
console.log(stats.text); // "5 min read"

ট্রান্সফরমেশন প্লাগিন

অটো-লিঙ্কিং

URL গুলিকে স্বয়ংক্রিয়ভাবে লিঙ্কে রূপান্তর করুন:

আরও তথ্যের জন্য https://example.com দেখুন।

হয়ে যাবে:
আরও তথ্যের জন্য [https://example.com](https://example.com) দেখুন।

প্লাগিন: markdown-it-linkify, remark-autolink-headings

ইমেজ অপ্টিমাইজেশন

ইমেজ অপ্টিমাইজ এবং লেজি-লোড করুন:

const imagePlugin = require('remark-images');

remark()
  .use(imagePlugin, {
    maxWidth: 1200,
    quality: 80,
    withWebp: true,
    lazy: true
  })
  .process(markdown);

সংক্ষিপ্ত রূপ

সংক্ষিপ্ত রূপ সাপোর্ট যোগ করুন:

HTML স্পেসিফিকেশনটি W3C দ্বারা রক্ষণাবেক্ষণ করা হয়।

*[HTML]: Hyper Text Markup Language
*[W3C]: World Wide Web Consortium

প্লাগিন: markdown-it-abbr

ইন্টিগ্রেশন প্লাগিন

React/MDX

মার্কডাউনে React কম্পোনেন্ট ব্যবহার করুন:

import { Chart } from './Chart'

# আমার ডকুমেন্ট

<Chart data={myData} />

Vue

Vue কম্পোনেন্ট ব্যবহার করুন:

<template>
  <MyComponent :data="data" />
</template>

Svelte

Svelte এর সাথে ইন্টিগ্রেট করুন:

<script>
  import Component from './Component.svelte';
</script>

<Component />

কাস্টম প্লাগিন তৈরি

Markdown-it প্লাগিন

function myPlugin(md, options) {
  // মূল নিয়ম সংরক্ষণ করুন
  const defaultRender = md.renderer.rules.link_open ||
    function(tokens, idx, options, env, self) {
      return self.renderToken(tokens, idx, options);
    };

  md.renderer.rules.link_open = function(tokens, idx, options, env, self) {
    // বাহ্যিক লিঙ্কে target="_blank" যোগ করুন
    const hrefIndex = tokens[idx].attrIndex('href');
    if (hrefIndex >= 0) {
      const href = tokens[idx].attrs[hrefIndex][1];
      if (href.startsWith('http')) {
        tokens[idx].attrPush(['target', '_blank']);
        tokens[idx].attrPush(['rel', 'noopener noreferrer']);
      }
    }

    return defaultRender(tokens, idx, options, env, self);
  };
}

module.exports = myPlugin;

Remark প্লাগিন

const visit = require('unist-util-visit');

function remarkPlugin() {
  return (tree) => {
    visit(tree, 'link', (node) => {
      // লিঙ্ক নোড পরিবর্তন করুন
      if (node.url.startsWith('http')) {
        node.data = node.data || {};
        node.data.hProperties = node.data.hProperties || {};
        node.data.hProperties.target = '_blank';
        node.data.hProperties.rel = 'noopener noreferrer';
      }
    });
  };
}

module.exports = remarkPlugin;

প্লাগিন কনফিগারেশন

বেসিক কনফিগারেশন

const md = require('markdown-it')({
  html: true,         // HTML ট্যাগ সক্ষম করুন
  linkify: true,      // URL স্বয়ংক্রিয় রূপান্তর
  typographer: true,  // স্মার্ট কোট
  breaks: false       // \n কে <br> তে রূপান্তর করবেন না
});

প্লাগিন অপশন

md.use(require('markdown-it-container'), 'warning', {
  validate: function(params) {
    return params.trim().match(/^warning\s+(.*)$/);
  },
  render: function(tokens, idx) {
    if (tokens[idx].nesting === 1) {
      return '<div class="warning">\n';
    } else {
      return '</div>\n';
    }
  }
});

সেরা অনুশীলন

1. বুদ্ধিমানের মতো চয়ন করুন: শুধুমাত্র প্রয়োজনীয় প্লাগিন ব্যবহার করুন
2. পারফরম্যান্স পরীক্ষা করুন: বিল্ড টাইমে প্লাগিন প্রভাব প্রোফাইল করুন
3. নিয়মিত আপডেট করুন: প্লাগিন আপ টু ডেট রাখুন
4. পুঙ্খানুপুঙ্খভাবে পরীক্ষা করুন: বিভিন্ন মার্কডাউন ইনপুটের সাথে পরীক্ষা করুন
5. ব্যবহার ডকুমেন্ট করুন: সক্ষম প্লাগিন এবং তাদের কনফিগারেশন ডকুমেন্ট করুন
6. ভার্সন লক: প্রোডাকশনে সঠিক ভার্সন ব্যবহার করুন
7. নিরাপত্তা: নিরাপত্তা সমস্যার জন্য প্লাগিন পরীক্ষা করুন

জনপ্রিয় প্লাগিন ইকোসিস্টেম

Markdown-it প্লাগিন

• markdown-it-footnote: ফুটনোট সাপোর্ট
• markdown-it-abbr: সংক্ষিপ্ত রূপ সংজ্ঞা
• markdown-it-emoji: ইমোজি শর্টকাট
• markdown-it-sub/sup: সাবস্ক্রিপ্ট এবং সুপারস্ক্রিপ্ট
• markdown-it-mark: হাইলাইট করা টেক্সট
• markdown-it-ins: সন্নিবেশিত টেক্সট
• markdown-it-container: কাস্টম কন্টেইনার

Remark প্লাগিন

• remark-gfm: GitHub Flavored Markdown
• remark-toc: বিষয়বস্তু সূচি
• remark-math: গাণিতিক সমীকরণ সাপোর্ট
• remark-html: HTML এ রূপান্তর
• remark-rehype: HTML AST এ রূপান্তর
• remark-frontmatter: ফ্রন্টম্যাটার পার্স

Unified ইকোসিস্টেম

const unified = require('unified');
const markdown = require('remark-parse');
const remark2rehype = require('remark-rehype');
const html = require('rehype-stringify');
const highlight = require('rehype-highlight');

unified()
  .use(markdown)
  .use(remark2rehype)
  .use(highlight)
  .use(html)
  .process(markdownContent);

ট্রাবলশুটিং

প্লাগিন কনফ্লিক্ট

// প্লাগিন অর্ডার পরীক্ষা করুন
md.use(plugin1)  // অর্ডার গুরুত্বপূর্ণ!
  .use(plugin2);

// কিছু প্লাগিন কনফ্লিক্ট হতে পারে
// সামঞ্জস্যের জন্য ডকুমেন্টেশন পরীক্ষা করুন

পারফরম্যান্স সমস্যা

// প্লাগিন প্রোফাইল করুন
console.time('markdown-render');
const result = md.render(content);
console.timeEnd('markdown-render');

ডিবাগিং

// ডিবাগ মোড সক্ষম করুন
const md = require('markdown-it')({
  debug: true
});

// টোকেন লগ করুন
const tokens = md.parse(content);
console.log(JSON.stringify(tokens, null, 2));

উপসংহার

প্লাগিন এবং এক্সটেনশন মার্কডাউনকে অত্যন্ত বহুমুখী করে তোলে। আপনার প্রয়োজনের জন্য নিখুঁত লেখা এবং প্রকাশনার ওয়ার্কফ্লো তৈরি করতে সঠিক প্লাগিনের সংমিশ্রণ চয়ন করুন।

অতিরিক্ত রিসোর্স

• Markdown-it প্লাগিন
• Remark প্লাগিন
• Unified প্লাগিন
• Awesome Markdown