प्रकाशित 13 फ़रवरी, 2026 • अद्यतन 13 फ़रवरी, 2026

फ़ीचर डेमो ब्लॉग: रिच टेक्स्ट, Mermaid, गणित और Shortcodes

canxin द्वारा • 6 मिनट पढ़ने का समय •

विषय सूची

संग्रहित

थीम और इंजन अपडेट होने के साथ यह पेज लगातार विकसित होता रहेगा।

ट्रिगर चेतावनी

इस पेज में कई फ़ॉर्मेट डेमो हैं (बाहरी मीडिया, collapsible blocks और dynamic visuals सहित), इसलिए जरूरत के अनुसार सेक्शन खोलकर देखें।

अस्वीकरण

यह एक प्रदर्शन पेज है, जिसका मुख्य उद्देश्य रेंडरिंग क्षमताएं दिखाना है।
कुछ चित्र/वीडियो बाहरी स्रोतों से हैं, इसलिए लोड होने की गति अलग हो सकती है।

विषय सूची

यह पोस्ट इस साइट का डेमो ब्लॉग पेज है, जिसका उपयोग rich text और extended formatting क्षमताओं को एक जगह सत्यापित करने के लिए किया जाता है।

बुनियादी Markdown क्षमताएं

टेक्स्ट स्टाइल: bold, italic, ~~strikethrough~~, inline code, और मिला-जुला स्टाइल ~~all together~~।

आंतरिक लिंक: Home
बाहरी लिंक: Zola Documentation
Emoji: 😭😂🥺🤣❤️✨🙏😍🥰😊

यह एक quote block है।
यहां nested quote का उदाहरण है:
Duckquill स्पष्ट और संरचित तकनीकी लेखन के लिए बहुत अच्छा है।

सूचियां, टास्क और Footnotes

सामान्य सूची आइटम A
सामान्य सूची आइटम B
- नेस्टेड आइटम B.1
- नेस्टेड आइटम B.2
सामान्य सूची आइटम C

सामग्री लिखें
लोकल प्रीव्यू देखें
प्रकाशित करें

कार्य 1: सामान्य Markdown एक्सटेंशन सक्षम करें
कार्य 2: Mermaid समर्थन जोड़ें
कार्य 3: इसे showcase पोस्ट में पुनर्गठित करें
कार्य 4: वास्तविक उपयोग के और उदाहरण जोड़ते रहें

Footnote उदाहरण¹ और लिंक वाला footnote²।

Definition List उदाहरण:

Mermaid: टेक्स्ट से ग्राफ़ संरचना लिखें और उसे अपने-आप SVG में रेंडर करें।
KaTeX: LaTeX गणितीय सूत्रों के लिए उच्च-प्रदर्शन रेंडरिंग।
Duckquill Shortcodes: थीम-स्तरीय फीचर एक्सटेंशन, जैसे alert, image, video, और youtube।

टेबल और कोड हाइलाइटिंग

सुविधा	स्थिति	टिप्पणियां
GitHub Alerts	Enabled	`[!NOTE]` और संबंधित सिंटैक्स समर्थित
Syntax Highlighting	Enabled	लाइन नंबर और highlighted lines समर्थित
Mermaid	Enabled	`mermaid` code blocks से रेंडरिंग समर्थित
KaTeX	इस पेज पर Enabled	`extra.katex = true` के माध्यम से

fn main() {
    println!("Duckquill demo blog");
}

1[extra]
2show_copy_button = true
3show_reading_time = true
4show_share_button = true

GitHub-शैली Alerts

यह NOTE alert है, जिसे पृष्ठभूमि संदर्भ देने के लिए उपयोग किया जाता है।

यह TIP alert है, जो व्यावहारिक सुझावों के लिए उपयोग होता है।

यह IMPORTANT alert है, जो महत्वपूर्ण चरणों पर जोर देता है।

यह WARNING alert है, जो संभावित समस्याओं की ओर संकेत करता है।

यह CAUTION alert है, जो जोखिमपूर्ण व्यवहार बताने के लिए उपयोग होता है।

KaTeX सूत्र

Inline formula: $E = mc^2$.

Block formula:

$$ f(x) = \int_{-\infty}^{\infty}\hat{f}(\xi)e^{2\pi i\xi x},d\xi $$

Mermaid आरेख

नीचे दिया गया mermaid block flowchart के रूप में रेंडर होता है:

flowchart LR
    A[Writing] --> B[Git Commit]
    B --> C[Zola Build]
    C --> D[Static Deploy]
    D --> E[Visit Site]

एक sequence diagram का उदाहरण:

sequenceDiagram
    participant U as User
    participant G as Git Repo
    participant Z as Zola
    U->>G: push content
    G-->>Z: trigger build
    Z-->>U: generated public site

Duckquill Shortcodes

alert shortcode (GitHub alerts से अलग; यह थीम shortcode है):

यह note shortcode alert है।

यह tip shortcode alert है।

यह important shortcode alert है।

यह warning shortcode alert है।

यह caution shortcode alert है।

Image shortcode (मूल उपयोग):

Image shortcode (अधिक विकल्प):

Float start demo यह टेक्स्ट start floating image व्यवहार दिखाता है, जहां छवि अनुच्छेद की शुरुआत वाली तरफ चिपकती है।

Float end demo यह टेक्स्ट end floating image व्यवहार दिखाता है, जहां छवि अनुच्छेद के अंत वाली तरफ चिपकती है।

Video shortcode (मूल और autoplay उदाहरण):

YouTube / Vimeo / Mastodon shortcode लिंक्स:

(ध्यान दें: इस showcase में third-party embeds से शोरगुल वाले console output से बचने के लिए इन्हें लिंक के रूप में दिखाया गया है।)

CRT shortcode:

user@duckquill-demo:~$ zola check
Checking site...
-> Site content: OK

HTML एक्सटेंशन क्षमताएं

क्लिक करके collapsible panel खोलें

आप यहां कोई भी सामग्री रख सकते हैं, जिसमें सूचियां, चित्र या code snippets शामिल हैं।

Collapsible सामग्री A
Collapsible सामग्री B

सामान्य inline HTML tags भी सीधे काम करते हैं:

ASCII
Ctrl + K
highlighted key text
this is a spoiler text
this is a solid spoiler text
~~old plan~~ new plan
this is an inline quotation
demo-output.log: all checks passed
this sentence is underlined

यह <small> साइड-नोट टेक्स्ट का उदाहरण है।

Form और interaction widget उदाहरण:

Mermaid सक्षम करें
KaTeX सक्षम करें
Backlinks सक्षम करें
Dark
Light

Accent color:

Content density:

Current accent color: #14897bContent density: 72%

Image + caption संयोजन (figure + figcaption):

Local figure demo — स्थानीय छवि + figcaption (कोई बाहरी निर्भरता नहीं, रेंडरिंग स्थिर रहती है)।

Progress bar उदाहरण (range input से page script द्वारा जुड़ा हुआ):

बटन और त्वरित नेविगेशन

ऊपर जाएं Zola content दस्तावेज़ पढ़ें

पेज-स्तरीय Front Matter फीचर्स

featured = true के अलावा, यह पेज निम्न भी दिखाता है:

banner = "banner-feature-en.png": पोस्ट बैनर और सूची थंबनेल।
accent_color / accent_color_dark: पेज-स्तरीय accent override।
styles = ["css/feature-demo-blog.css"] और scripts = ["js/feature-demo-blog.js"]: पेज-स्कोप्ड styles और scripts।
emoji_favicon = "🧪": ब्राउज़र टैब के लिए emoji favicon।

यह सेक्शन पेज-स्तरीय कॉन्फ़िग रेंडरिंग की जांच के लिए एक संक्षिप्त checklist है।

Backlinks डेमो

मैंने about पेज से इस पोस्ट के लिए एक लिंक जोड़ा है।

यदि quick-action बटनों में Backlinks आइटम दिखता है, तो internal backlink index अपेक्षित रूप से काम कर रहा है।

यदि ऊपर के सभी मॉड्यूल सही रेंडर होते हैं, तो इसका अर्थ है कि ब्लॉग की rich-text क्षमता अब अधिकांश सामान्य लेखन परिदृश्यों को कवर करती है।

Footnotes मुख्य पढ़ने के प्रवाह को बाधित किए बिना अतिरिक्त व्याख्या देने का अच्छा तरीका हैं। ↩
Footnotes में links भी हो सकते हैं ↩