Markdown प्लगइन्स

Markdown प्लगइन्स मूल सिंटैक्स को विस्तारित करने और नई सुविधाएँ जोड़ने के लिए उपयोग किए जाते हैं। यह अनुभाग लोकप्रिय प्लगइन्स, उनके उपयोग और एकीकरण को कवर करता है।

प्लगइन्स क्या हैं?

अवलोकन

Markdown प्लगइन्स छोटे सॉफ़्टवेयर मॉड्यूल हैं जो Markdown प्रोसेसर के कार्य को बढ़ाते हैं। वे नई सिंटैक्स, सामग्री ट्रांसफॉर्मेशन, आउटपुट फॉर्मेटिंग आदि जोड़ सकते हैं।

प्लगइन्स के प्रकार

1. सिंटैक्स विस्तार: नई Markdown सुविधाएँ (टू-डू सूचियाँ, फुटनोट)
2. सामग्री प्रोसेसिंग: टेक्स्ट ट्रांसफॉर्मेशन, लिंक चेकिंग
3. आउटपुट बढ़ाना: PDF निर्यात, TOC उत्पन्न करना
4. एकीकरण: CMS, API के साथ एकीकरण
5. उपकरण: लिंटिंग, वैलिडेशन, ऑटो-फॉर्मेटिंग

लोकप्रिय Markdown प्लगइन्स

1. markdown-it प्लगइन्स

markdown-it सबसे लोकप्रिय Markdown पार्सर है और कई प्लगइन्स का समर्थन करता है।

स्थापना

npm install markdown-it
npm install markdown-it-container  # कस्टम कंटेनर
npm install markdown-it-anchor     # स्वचालित एंकर लिंक
npm install markdown-it-footnote   # फुटनोट समर्थन
npm install markdown-it-deflist    # परिभाषा सूचियाँ

उपयोग उदाहरण

const md = require('markdown-it')()
    .use(require('markdown-it-footnote'))
    .use(require('markdown-it-anchor'), {
        permalink: true,
        slugify: str => encodeURIComponent(str.toLowerCase().replace(/[^a-z0-9]+/g, '-'))
    })
    .use(require('markdown-it-container'), 'spoiler', {
        validate: params => params.trim().match(/^spoiler\s+(.*)$/),
        render: (tokens, idx) => {
            const m = tokens[idx].info.trim().match(/^spoiler\s+(.*)$/);
            if (tokens[idx].nesting === 1) {
                return `<details class="spoiler"><summary>${md.utils.escapeHtml(m[1])}</summary>\n`;
            }
            return '</details>\n';
        }
    });

const result = md.render('# शीर्षक[^1]\n\nयह फुटनोट उदाहरण है।\n\n::: spoiler छिपी जानकारी\nयह छिपी सामग्री है।\n:::\n\n[^1]: फुटनोट सामग्री।');

सामान्य markdown-it प्लगइन्स

प्लगइन	उद्देश्य	उदाहरण
markdown-it-footnote	फुटनोट समर्थन	यह फुटनोट[^1] है।
markdown-it-anchor	स्वचालित शीर्षक ID	# शीर्षक {#my-id}
markdown-it-container	कस्टम ब्लॉक	::: tip\nटिप\n:::
markdown-it-deflist	परिभाषा सूचियाँ	शब्द\n: परिभाषा
markdown-it-abbr	संक्षिप्त रूप	*[HTML]: हाइपरटेक्स्ट मार्कअप भाषा
markdown-it-ins	अंतर्निहित टेक्स्ट	++अंतर्निहित++
markdown-it-mark	हाइलाइट टेक्स्ट	==हाइलाइट==
markdown-it-sub	सबस्क्रिप्ट	H~2~O
markdown-it-sup	सुपरस्क्रिप्ट	X^2^

2. Remark प्लगइन्स

Remark एकीकृत Markdown प्रोसेसिंग के लिए प्लगइन्स प्रदान करता है:

स्थापना

npm install unified remark-parse remark-rehype rehype-stringify
npm install remark-toc remark-slug remark-gfm

उपयोग

const unified = require('unified');
const remarkParse = require('remark-parse');
const remarkRehype = require('remark-rehype');
const rehypeStringify = require('rehype-stringify');
const remarkToc = require('remark-toc');
const remarkSlug = require('remark-slug');
const remarkGfm = require('remark-gfm');

unified()
    .use(remarkParse)
    .use(remarkGfm)           // GitHub Flavored Markdown
    .use(remarkSlug)          // शीर्षक ID
    .use(remarkToc, {         // TOC उत्पन्न करें
        heading: 'contents',
        tight: true
    })
    .use(remarkRehype)
    .use(rehypeStringify)
    .process(markdownContent)
    .then(file => console.log(String(file)));

3. VS Code एक्सटेंशन

VS Code में Markdown कार्यप्रवाह को बढ़ाने के लिए:

एक्सटेंशन	उद्देश्य	मुख्य सुविधाएँ
Markdown PDF	PDF निर्यात	PDF, PNG, JPEG निर्यात
Markdown Preview Enhanced	उन्नत पूर्वावलोकन	MathJax, PlantUML, विज़ुअलाइज़ेशन
Markdownlint	कोड गुणवत्ता	Markdown लिंटिंग नियम
Auto Markdown	स्वचालन	TOC, हेडर ID ऑटो-जनरेट
Paste Image	छवि प्रबंधन	क्लिपबोर्ड छवियों को एम्बेड करें

स्थापना:

1. VS Code खोलें
2. Extensions (Ctrl+Shift+X) पर जाएँ
3. "Markdown" खोजें
4. वांछित एक्सटेंशन इंस्टॉल करें

4. Hugo शॉर्टकोड और आंशिक

Hugo में कस्टम शॉर्टकोड:

बटन शॉर्टकोड

layouts/shortcodes/button.html:

<a href="{{ .Get 0 }}" 
   class="btn btn-{{ .Get 1 | default "primary" }} {{ .Get 2 | default "" }}"
   {{ if .Get 3 }}target="{{ .Get 3 }}"{{ end }}>
    {{ .Inner | markdownify | .Page.RenderString }}
</a>

उपयोग:

{{< button "/contact" "secondary" "external" "target=_blank" >}}
संपर्क करें
{{< /button >}}

गैलरी शॉर्टकोड

layouts/shortcodes/gallery.html:

<div class="gallery {{ .Get 0 | default "grid" }}">
    {{ range $index, $page := .Pages }}
        <figure class="gallery-item">
            {{ if $page.Params.image }}
                <img src="{{ $page.Params.image | relURL }}" 
                     alt="{{ $page.Title }}"
                     loading="lazy">
            {{ end }}
            <figcaption>{{ $page.Title }}</figcaption>
        </figure>
    {{ end }}
</div>

उन्नत प्लगइन कॉन्फ़िगरेशन

1. markdown-it कस्टम प्लगइन

// कस्टम admonition प्लगइन
function admonitionPlugin(md, options) {
    const type = options.defaultType || 'note';
    
    md.inline.ruler.after('emphasis', 'admonition', function(state, silent) {
        // सिंटैक्स: [admonition:warning] चेतावनी [/admonition:warning]
        // या सरल: [!warning] चेतावनी [warning]
    });
    
    md.block.ruler.before('blockquote', 'admonition_block', function(state, startLine, endLine, silent) {
        // ::: warning
        // चेतावनी सामग्री
        // :::
    });
}

// उपयोग
const md = require('markdown-it')()
    .use(admonitionPlugin, { defaultType: 'info' })
    .use(require('markdown-it-container'), 'warning', {
        validate: params => params.trim() === 'warning',
        render: function (tokens, idx) {
            if (tokens[idx].nesting === 1) {
                return `<div class="admonition warning">\n`;
            } else {
                return `</div>\n`;
            }
        }
    });

2. Remark प्लगइन चेन

const unified = require('unified');
const remarkParse = require('remark-parse');
const remarkStringify = require('remark-stringify');
const remarkGfm = require('remark-gfm');
const remarkToc = require('remark-toc');
const remarkFrontmatter = require('remark-frontmatter');
const remarkValidateLinks = require('remark-validate-links');

unified()
    .use(remarkParse)
    .use(remarkFrontmatter, ['yaml', 'toml'])  // फ्रंटमैटर समर्थन
    .use(remarkGfm)                           // GFM सुविधाएँ
    .use(remarkToc, { heading: 'nav' })       // TOC उत्पन्न करें
    .use(remarkValidateLinks)                 // लिंक वैलिडेशन
    .use(remarkStringify)
    .process(markdown)
    .then(result => {
        console.log(result.toString());
        if (result.messages.length > 0) {
            console.warn('चेतावनियाँ:', result.messages);
        }
    })
    .catch(err => console.error('प्रोसेसिंग त्रुटि:', err));

3. कस्टम VS Code टास्क

.vscode/tasks.json:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Markdown: लिंट और पूर्वावलोकन",
            "type": "shell",
            "command": "npx",
            "args": [
                "markdownlint-cli",
                "**/*.md",
                "--fix"
            ],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared"
            },
            "problemMatcher": ["$markdownlint"]
        },
        {
            "label": "Markdown: PDF निर्यात",
            "type": "shell",
            "command": "npx",
            "args": [
                "md-to-pdf",
                "${file}",
                "--css",
                "styles.css"
            ],
            "group": "build",
            "presentation": {
                "echo": true,
                "reveal": "never",
                "focus": false
            }
        }
    ]
}

प्लगइन एकीकरण उदाहरण

1. पूर्ण markdown-it कॉन्फ़िगरेशन

const md = require('markdown-it')({
    html: true,                    // HTML इनपुट/आउटपुट सक्षम करें
    xhtmlOut: true,                // XHTML-समर्थित आउटपुट
    breaks: true,                  // नरम ब्रेक को <br> में परिवर्तित करें
    langPrefix: 'language-',       // कोड ब्लॉक के लिए CSS क्लास प्रीफिक्स
    linkify: true,                 // URL को स्वचालित रूप से लिंक करें
    typographer: true,             // टाइपोग्राफिक प्रतिस्थापन
    quotes: '«»""'                 // उद्धरण चिह्न
})
.use(require('markdown-it-footnote'))
.use(require('markdown-it-abbr'))
.use(require('markdown-it-deflist'))
.use(require('markdown-it-ins'))
.use(require('markdown-it-mark'))
.use(require('markdown-it-sub'))
.use(require('markdown-it-sup'))
.use(require('markdown-it-emphasis'), {
    // कस्टम जोर नियम
    italics: true,
    strong: true
})
.use(require('markdown-it-container'), 'info', {
    validate: params => params.trim() === 'info',
    render: tokens => {
        if (tokens[0].nesting === 1) {
            return `<div class="admonition info">\n`;
        }
        return `</div>\n`;
    }
})
.use(require('markdown-it-anchor'), {
    level: [1,2,3,4],
    permalink: true,
    slugify: s => encodeURIComponent(s.toLowerCase().replace(/[^\w]+/g, '-'))
})
.use(require('markdown-it-toc-done-right'), {
    callback: (tocMarkdown, tocArray) => {
        // TOC उत्पन्न करने के बाद कस्टम लॉजिक
        console.log('TOC उत्पन्न:', tocArray);
    }
});

// उपयोग
const html = md.render('# शीर्षक\n\nयह एक **उदाहरण** है।\n\n[HTML][1] का उपयोग।\n\n[^1]: हाइपरटेक्स्ट मार्कअप भाषा\n\n::: info\nयह सूचना बॉक्स है।\n:::\n\n++अंतर्निहित टेक्स्ट++\n\n==हाइलाइट टेक्स्ट==');

2. Gatsby + Remark प्लगइन

gatsby-config.js:

module.exports = {
    plugins: [
        {
            resolve: 'gatsby-plugin-mdx',
            options: {
                gatsbyRemarkPlugins: [
                    {
                        resolve: 'gatsby-remark-images',
                        options: {
                            maxWidth: 1200,
                            wrapperStyle: 'margin-bottom: 1.5rem;'
                        }
                    },
                    {
                        resolve: 'gatsby-remark-prismjs',
                        options: {
                            classPrefix: 'language-',
                            inlineCodeMarker: null,
                            aliases: {
                                js: 'javascript',
                                sh: 'bash'
                            }
                        }
                    },
                    {
                        resolve: 'gatsby-remark-smartypants',
                        options: {
                            dashes: 'oldschool'
                        }
                    },
                    {
                        resolve: 'gatsby-remark-external-links',
                        options: {
                            target: '_blank',
                            rel: 'noopener noreferrer'
                        }
                    }
                ],
                mdxOptions: {
                    remarkPlugins: [
                        require('remark-toc-headings')
                    ],
                    rehypePlugins: [
                        require('rehype-slug'),
                        require('rehype-autolink-headings')
                    ]
                }
            }
        }
    ]
};

3. Hugo कॉन्फ़िगरेशन

config.yaml:

markup:
  goldmark:
    renderer:
      unsafe: true  # HTML रेंडरिंग सक्षम करें
  highlight:
    style: github
    lineNos: true
  tableOfContents:
    startLevel: 2
    endLevel: 4

params:
  shortcodes:
    youtube:
      privacy: true
    image:
      lazy: true

प्लगइन चयन मानदंड

1. संगतता

• प्रोसेसर संगतता: आपके Markdown प्रोसेसर के साथ संगत हो
• वर्जन समर्थन: सक्रिय रखरखाव और अपडेट
• समुदाय समर्थन: मुद्दों के लिए सक्रिय समुदाय

2. प्रदर्शन प्रभाव

// प्रदर्शन-केंद्रित प्लगइन चयन
const performancePlugins = [
    // हल्के प्लगइन्स
    'remark-slug',           // ~1ms
    'remark-toc',            // ~5ms
    // भारी प्लगइन्स
    'remark-lint',           // ~50ms+
    'gatsby-remark-images'   // संसाधन-गहन
];

// प्राथमिकता: आवश्यक सुविधाएँ पहले, वैकल्पिक बाद में
const essentialPlugins = ['remark-slug', 'remark-toc'];
const optionalPlugins = ['remark-lint'];

3. सुरक्षा

• आउटपुट सैनिटाइज़ेशन: XSS जोखिमों से बचें
• इनपुट वैलिडेशन: अमान्य डेटा हैंडल करें
• निर्भरता ऑडिट: npm audit का उपयोग करें

संबंधित संसाधन

• HTML का उपयोग करना
• CSS का उपयोग करना
• शॉर्टकोड

सारांश

Markdown प्लगइन्स दस्तावेज़ीकरण कार्यप्रवाह को नाटकीय रूप से बढ़ा सकते हैं। सिंटैक्स विस्तार से लेकर आउटपुट अनुकूलन तक, सही प्लगइन चयन उत्पादकता, सुरक्षा और उपयोगकर्ता अनुभव को सुधारता है।

मुख्य टेकअवे:

• संगतता प्राथमिक: आपके स्टैक के साथ संगत प्लगइन्स चुनें
• प्रदर्शन संतुलन: सुविधा और गति के बीच संतुलन बनाए रखें
• सुरक्षा जागरूकता: हमेशा आउटपुट को सत्यापित और सैनिटाइज़ करें
• समुदाय संसाधन: सक्रिय समुदाय वाले प्लगइन्स को प्राथमिकता दें

सावधानीपूर्वक प्लगइन एकीकरण के साथ, Markdown न केवल दस्तावेज़ीकरण टूल बल्कि पूर्ण सामग्री प्रबंधन प्रणाली बन जाता है।