मुख्य कंटेंट तक स्किप करें

सुविधाएँ

इस पृष्ठ पर हर अंतर्निहित सुविधा का वर्णन स्रोत कोड में उसके वास्तविक कार्यान्वयन के अनुसार किया गया है।

क्रमिक रेंडरिंग​

बड़े दस्तावेज़ों में तेज़ प्रतिक्रिया बनाए रखने के लिए पूर्वावलोकन हर ब्लॉक को अलग से क्रमिक रूप में रेंडर करता है:

  • ब्लॉक में विभाजन (splitIntoBlocks): स्रोत को ATX शीर्षक वाली पंक्तियों (# से ###### तक) पर विभाजित किया जाता है। बैकटिक या टिल्डा से घिरे कोड ब्लॉक की सामग्री को कभी विभाजन बिंदु नहीं माना जाता; ::: कस्टम कंटेनर के अंदर के शीर्षक भी सुरक्षित रहते हैं। बिना शीर्षक वाला दस्तावेज़ एक ही ब्लॉक के रूप में संसाधित होता है।
  • प्रति-ब्लॉक रेंडरिंग: केवल उन ब्लॉक को markdown-it / KaTeX से दोबारा संसाधित किया जाता है जिनका सामग्री हैश बदला है। अपरिवर्तित ब्लॉक मौजूदा DOM नोड सीधे इस्तेमाल करते हैं, जिनमें पहले से इंटरैक्टिव बनाए गए माइंडमैप SVG भी शामिल हैं।
  • सामग्री हैश पर आधारित कैश: रेंडरिंग के परिणाम सामग्री हैश (djb2 शैली का तेज़ हैश और लंबाई) के आधार पर सहेजे जाते हैं, इसलिए पूर्ववत/फिर से करें और समान अनुच्छेदों को कॉपी-पेस्ट करने पर भी कैश काम आता है। 800 से अधिक प्रविष्टियाँ होने पर उन हैश को हटाया जाता है जो अब दस्तावेज़ में नहीं हैं। वर्तमान ब्लॉक की प्रविष्टियाँ रखी जाती हैं, इसलिए 800 से अधिक अलग-अलग ब्लॉक वाला दस्तावेज़ इस सीमा से आगे जा सकता है।
  • क्रम बदलना: मौजूदा नोड को DocumentFragment में जोड़कर ब्लॉक को उनके नए क्रम में ले जाया जाता है।
  • अनुकूलित डिबाउंस (adaptiveDebounceMs(docLength, base = 120, max = 600)): रेंडरिंग से पहले का विराम base + floor(docLength / 20000) * 60 होता है, जिसकी अधिकतम सीमा max है। इसे renderDebounce से बदलें, या समकालिक रेंडरिंग के लिए renderDebounce: false सेट करें।
  • content-visibility: auto: हर ब्लॉक को .md-editor-block एलिमेंट में रखा जाता है, ताकि स्क्रीन से बाहर के ब्लॉक का लेआउट और पेंट छोड़ा जा सके।

किसी एक ब्लॉक की रेंडरिंग विफल होने पर पूरा पूर्वावलोकन खाली नहीं होता; उस ब्लॉक का एस्केप किया गया स्रोत <pre> में दिखाया जाता है।

KaTeX गणितीय सूत्र​

स्वतंत्र markdown-it गणित प्लगइन KaTeX से सूत्र रेंडर करता है (markdown-it-texmath पर निर्भरता नहीं है):

  • इनलाइन सूत्र: $E=mc^2$ — सामग्री खाली नहीं होनी चाहिए और उसमें $ या नई पंक्ति नहीं होनी चाहिए। $5 या $10.50 जैसी मुद्रा राशि से मिलती-जुलती सामग्री को अनुमान-आधारित नियम से बाहर रखा जाता है।
  • ब्लॉक सूत्र:
    $$
    \int_0^1 x^2 \, dx
    $$
    एक पंक्ति ($$ ... $$) और कई पंक्तियों वाले दोनों रूप समर्थित हैं। KaTeX CSS पैकेज में शामिल है। बंद करने के लिए math: false इस्तेमाल करें।

Markmap माइंडमैप​

एक ```mindmap फेंस वाला ब्लॉक लिखें जिसकी सामग्री Markdown की रूपरेखा हो:

```mindmap
# Root topic
## Branch one
- Child A
- Child B
## Branch two
- Child C
```

ब्लॉक नियम फेंस की नेस्टिंग गहराई पर नज़र रखता है, इसलिए माइंडमैप के अंदर के कोड फेंस सुरक्षित रहते हैं। समकालिक रेंडरिंग में एक <div> प्लेसहोल्डर बनता है; Renderer.hydrate(container) असमकालिक रूप से markmap-lib और markmap-view आयात करता है और हर प्लेसहोल्डर को इंटरैक्टिव SVG में बदलता है। इंटरैक्टिव बनाने में हुई त्रुटियाँ पूरी प्रक्रिया को नहीं रोकतीं। बंद करने के लिए mindmap: false इस्तेमाल करें।

कॉपी बटन के साथ कोड हाइलाइटिंग​

फेंस वाले कोड ब्लॉक highlight.js से हाइलाइट किए जाते हैं। बिल्ड भाषाओं का एक तय समूह पंजीकृत करता है: JavaScript, TypeScript, Python, JSON, Bash/Shell, CSS, XML/HTML/SVG, SQL, YAML, Markdown, Go, Rust, Java, C और C++ (साथ में js, ts, py, sh, yml, md, rs, c++ जैसे सामान्य वैकल्पिक नाम)। अज्ञात भाषा का स्वतः पता लगाया जाता है; पहचान विफल होने पर एस्केप किया गया साधारण पाठ दिखाया जाता है।

हर हाइलाइट किए गए ब्लॉक को macOS शैली के कंटेनर में रखा जाता है, जिसमें रंगीन बिंदु, भाषा का नाम और कॉपी करें बटन होता है। कॉपी बटन पूर्वावलोकन पैनल पर इवेंट डेलिगेशन इस्तेमाल करता है और Clipboard API उपलब्ध न होने पर document.execCommand('copy') का सहारा लेता है। बंद करने के लिए codeHighlight: false इस्तेमाल करें।

टूलबार की क्रियाएँ​

complex मोड में टूलबार नीचे दी गई 22 क्रियाओं से इसी डिफ़ॉल्ट क्रम में बनता है:

#क्रिया का नामउद्देश्य
1headingशीर्षक
2boldबोल्ड (Ctrl+B)
3italicइटैलिक (Ctrl+I)
4linkलिंक (Ctrl+K)
5imageछवि जोड़ें
6videoवीडियो जोड़ें
7youtubeYouTube वीडियो जोड़ें
8quoteउद्धरण
9ulबिना क्रम वाली सूची
10olक्रमांकित सूची
11tasklistकार्य सूची
12mentionउल्लेख (@)
13doclinkदस्तावेज़ लिंक जोड़ें
14codeकोड ब्लॉक
15tableतालिका
16mathगणितीय सूत्र
17mindmapमाइंडमैप जोड़ें
18hrक्षैतिज रेखा
19tipsसूचना बॉक्स जोड़ें
20previewपूर्वावलोकन चालू/बंद करें
21helpकीबोर्ड शॉर्टकट
22themeथीम बदलें

अंतर्निहित लेबल अंग्रेज़ी में हैं। टूलटिप और सुलभ नामों का स्थानीयकरण करने के लिए हर आइटम का label बदलें। कुछ क्रियाएँ पॉपअप या टेम्पलेट चयनकर्ता खोलती हैं: छवि, वीडियो, YouTube, तालिका, सूत्र (टेम्पलेट), माइंडमैप (टेम्पलेट), सूचना बॉक्स (प्रकारों की ग्रिड) और सहायता। कॉन्फ़िगरेशन में बताए अनुसार toolbar विकल्प से टूलबार सेट करें।

कीबोर्ड शॉर्टकट​

अंतर्निहित शॉर्टकट DEFAULT_SHORTCUTS में परिभाषित हैं। Mod का अर्थ Windows/Linux पर Ctrl और macOS पर Cmd है।

कुंजीक्रियाविवरण
Mod-bboldबोल्ड
Mod-iitalicइटैलिक
Mod-Alt-1headingशीर्षक
Mod-klinkलिंक जोड़ें
Mod-Alt-ccodeकोड ब्लॉक
Mod-Shift-.quoteब्लॉक उद्धरण
Mod-Shift-8ulबिना क्रम वाली सूची
Mod-Shift-7olक्रमांकित सूची
Mod-Shift-9tasklistकार्य सूची
Mod-Alt-mmathगणितीय सूत्र
Mod-Alt-ppreviewपूर्वावलोकन चालू/बंद करें
Mod-Shift-lthemeथीम बदलें

टूलबार का सहायता बटन एक संवाद खोलता है जिसमें शॉर्टकट कुंजियों के रूप में दिखते हैं। इसमें कार्य सूची, उल्लेख, दस्तावेज़ लिंक, सूत्र, माइंडमैप और सूचना बॉक्स का संक्षिप्त संदर्भ भी होता है।

छवि अपलोड​

onImageUpload: (file: File) => Promise<string> दें। छवि फ़ाइल को संपादक में पेस्ट या ड्रॉप करने पर यह हुक चलता है। छवि पॉपअप URL स्वीकार करता है; उसमें फ़ाइल चुनने की सुविधा नहीं है। छवि का सार्वजनिक URL लौटाएँ; संपादक कर्सर पर ![alt](url) जोड़ता है (वैकल्पिक पाठ के लिए एक्सटेंशन हटाकर फ़ाइल का नाम इस्तेमाल होता है)। अपलोड की त्रुटियाँ बिना संदेश के दबा दी जाती हैं, जिसके बाद उपयोगकर्ता फिर कोशिश कर सकता है।

@mention​

उपयोगकर्ता के @ टाइप करने पर खोज योग्य ड्रॉपडाउन खोलने के लिए mention विकल्प दें:

  • onMentionSearch(query) मेल खाने वाले MentionItem लौटाता है।
  • onMentionSelect(item) जोड़ा जाने वाला पाठ लौटाता है। डिफ़ॉल्ट [@label](mention:id) है, जिसे रेंडरर शैलीबद्ध बैज में बदलता है।
  • minChars (डिफ़ॉल्ट 0) और maxItems (डिफ़ॉल्ट 8) ड्रॉपडाउन को नियंत्रित करते हैं।

ड्रॉपडाउन ArrowUp/ArrowDown, Enter/Tab और Escape से नेविगेशन का समर्थन करता है और संपादक से फ़ोकस हटने पर बंद हो जाता है। पूर्वावलोकन में @media जैसा साधारण @ पाठ बैज नहीं बनता; केवल mention: स्कीम वाले लिंक बैज बनते हैं। संपादक में ऐसा पाठ फिर भी कॉन्फ़िगर किए गए खोज हुक को चला सकता है।

दस्तावेज़ लिंक​

ट्रिगर अक्षर (डिफ़ॉल्ट /) के बाद दस्तावेज़ खोज ड्रॉपडाउन खोलने के लिए docLink विकल्प दें:

  • onDocSearch(query) मेल खाने वाले DocItem लौटाता है।
  • onFetchDocMeta(url) शीर्षक, थंबनेल और विवरण लाता है। अंतर्निहित कार्यान्वयन Open Graph टैग पढ़ने के लिए fetch + DOMParser इस्तेमाल करता है और अलग मूल का सर्वर CORS की अनुमति न दे तो विफल हो सकता है। ज़रूरत पड़ने पर अपना बैकएंड प्रॉक्सी इस्तेमाल करें।
  • insertStyle जोड़ने का तरीका नियंत्रित करता है: 'auto' (मेटाडेटा उपलब्ध होने पर कार्ड), 'card' या 'link'।

चुना गया दस्तावेज़ साधारण लिंक या :::doc-link कार्ड के रूप में जुड़ता है। कार्ड में शीर्षक, थंबनेल, विवरण और होस्टनाम क्लिक किए जा सकने वाले पूर्वावलोकन में दिखते हैं।

चेतावनी / सूचना ब्लॉक​

छह प्रकारों में से किसी एक के साथ ::: कंटेनर लिखें। शुरुआती पंक्ति में प्रकार के बाद वैकल्पिक शीर्षक दिया जा सकता है:

:::notice
This is a notice.
:::

:::warning[Title here]
Warning content.
:::

समर्थित प्रकार: notice, info, tip, success, warning, danger। हर प्रकार एक आइकन, रंगीन बाएँ बॉर्डर और शीर्षक के साथ दिखता है। टूलबार का सूचना बटन सभी छह प्रकारों का दृश्य चयनकर्ता खोलता है। बंद करने के लिए tips: false इस्तेमाल करें।

कार्य सूची​

- [ ] या - [x] से मेल खाने वाले सूची आइटम (कोष्ठकों में किसी भी मात्रा में रिक्त स्थान के साथ) निष्क्रिय चेकबॉक्स के रूप में दिखते हैं। परियोजना की परंपरा पर ध्यान दें: - [ ] चयनित (हरा) और - [x] अचयनित दिखता है — यह GitHub Flavored Markdown के उलट है। टूलबार का कार्य सूची बटन वर्तमान या चुनी गई पंक्तियों के मार्कर बदलता है।

अगले चरण​