यदि आप वेब के लिए लिखते हैं, तो आप मार्कडाउन में देखना चाहेंगे। बहुत सारे मार्कडाउन ऐप हैं जो वेब लेखकों को पूरा करते हैं। लेकिन माइक्रोसॉफ्ट के विजुअल स्टूडियो कोड (वीएससीओडी) जैसे मुफ्त कोड संपादक और भी शक्तिशाली हो सकते हैं।

VSCode मार्कडाउन को समझता है और इसमें HTML में पूर्वावलोकन करने के लिए अंतर्निहित टूल हैं। हालाँकि, आप शब्द संसाधक कार्यक्षमता जैसे शब्द गणना और एक वर्तनी परीक्षक जोड़ सकते हैं। आप पूर्वावलोकनकर्ता के लिए वेबसाइट-विशिष्ट अनुकूलन सक्षम करना भी चाह सकते हैं।

अंत में, मार्कडाउन को HTML के रूप में कॉपी करने की क्षमता ताकि आप इसे सामग्री प्रबंधन प्रणाली (सीएमएस) में साफ-साफ पेस्ट कर सकें।

VSCode डाउनलोड और इंस्टॉल करें

शुरू करने के लिए, VSCode या इसके ओपन सोर्स वैकल्पिक VSCodium को डाउनलोड करें। प्रत्येक के संस्करण सभी प्रमुख डेस्कटॉप ऑपरेटिंग सिस्टम के लिए उपलब्ध हैं।

एक बार जब आप डाउनलोड और स्थापित VSCode, शुरू करने के लिए एप्लिकेशन चलाएँ।

वर्ड काउंट एक्सटेंशन स्थापित करें

एक शब्द काउंटर जोड़कर प्रारंभ करें। ऐसे कई एक्सटेंशन उपलब्ध हैं जो इसे संभालते हैं। जो वास्तविक शब्दों और कोड या फ़ाइल नामों के बीच सबसे अच्छा अंतर करता है, वह माइक्रोसॉफ्ट का अपना वर्ड काउंटर एक्सटेंशन है।

instagram viewer

डाउनलोड:शब्द गणना VSCode एक्सटेंशन (फ्री)

  1. पर क्लिक करें एक्सटेंशन डाउनलोड करें नीचे साधन निचले दाएं फलक में।
  2. डाउनलोड हो जाने के बाद, VSCode पर स्विच करें।
  3. पर क्लिक करें गियर निशान इंटरफ़ेस के निचले-बाएँ कोने में।
  4. पर क्लिक करें एक्सटेंशन.
  5. इलिप्सिस पर क्लिक करें (...) एक्सटेंशन फलक के शीर्ष के पास।
  6. क्लिक VSIX. से स्थापित करें.
  7. चुनना ms-vscode.wordcount-*.vsix फ़ाइल जिसे आपने अभी डाउनलोड किया है।

शब्द गणना एक्सटेंशन अब स्थापित किया जाना चाहिए। एक नई मार्कडाउन फ़ाइल खोलकर और टाइप करके इसका परीक्षण करें। अब आपको इंटरफ़ेस के नीचे बाईं ओर एक शब्द काउंटर देखना चाहिए:

वर्तनी जाँच एक्सटेंशन स्थापित करें

आप वर्तनी जांच कार्यक्षमता भी जोड़ना चाहेंगे। शब्द काउंटरों की तरह, कई एक्सटेंशन हैं जो वर्तनी जांच को संभालते हैं। सबसे लोकप्रिय है कोड वर्तनी जांच स्ट्रीट साइड सॉफ्टवेयर द्वारा क्योंकि यह कई भाषाओं में उपलब्ध है।

डाउनलोड:कोड वर्तनी जांच VSCode एक्सटेंशन (फ्री)

  1. उपरोक्त अनुभाग से चरण 1 से 6 तक का पालन करें।
  2. चुनना Streetsidesoftware.code-spell-checker-*.vsix फ़ाइल जिसे आपने अभी डाउनलोड किया है।

कोड वर्तनी जांच एक्सटेंशन अब स्थापित किया जाना चाहिए। एक नई मार्कडाउन फ़ाइल खोलकर और गलत वर्तनी वाले शब्द टाइप करके इसका परीक्षण करें।

आपको उन शब्दों के नीचे एक नीली स्क्विगली लाइन दिखनी चाहिए, साथ ही इंटरफ़ेस के निचले दाएं हिस्से में त्रुटियों की संख्या भी दिखाई देगी:

त्रुटि स्क्वीगल को अनुकूलित करें

इस वर्तनी जांच एक्सटेंशन के साथ सबसे बड़ी समस्या कमजोर नीला रंग है जो त्रुटियों की पहचान करने वाले स्क्वीगल के लिए उपयोग किया जाता है। यह डार्क थीम की पृष्ठभूमि में मिश्रित हो जाता है और अन्य मार्कडाउन तत्वों के लिए पुन: उपयोग किया जाता है।

आप इसे एक बोल्ड लाल रंग में बदलने का प्रयास कर सकते हैं जैसे आप किसी वर्ड प्रोसेसर में देखने की अपेक्षा करते हैं:

  1. पर क्लिक करें गियर निशान इंटरफ़ेस के निचले-बाएँ कोने में।
  2. पर क्लिक करें समायोजन.
  3. पर क्लिक करें कार्यक्षेत्र, फिर दिखावट.
  4. नीचे स्क्रॉल करें रंग अनुकूलन:
  5. क्लिक सेटिंग्स में संपादित करें।json.
  6. एक नए टैब में खुलने वाले संपादक में निम्न कोड चिपकाएँ:
    "संपादकइन्फो.अग्रभूमि": "#ff0000"
  7. फ़ाइल को बंद करें और सहेजें।

अब यदि आप किसी शब्द की गलत वर्तनी करते हैं, तो VSCode इसे एक चमकीले लाल रंग के स्क्वीगल से सजाएगा:

झूठी सकारात्मकता को अनदेखा करना

वर्तनी परीक्षक कुछ उद्योग-विशिष्ट शब्दों या कंपनी के नामों जैसे उचित संज्ञाओं को नहीं पहचान सकता है। ऊपर दिए गए स्क्रीनशॉट में, उदाहरण के लिए, VSCode संक्षिप्त नाम "डिस्ट्रो" को गलत वर्तनी के रूप में हाइलाइट करता है।

इन शब्दों को त्रुटियों के रूप में देखना बंद करने के लिए, आप उन्हें अपने में जोड़ना चाहेंगे उपयोगकर्ता सेटिंग.

  1. उस शब्द पर राइट-क्लिक करें जिसे आप वर्तनी परीक्षक को अनदेखा करना चाहते हैं।
  2. मंडराना वर्तनी और चुनें उपयोगकर्ता सेटिंग में शब्द जोड़ें.

अब से, वर्तनी जाँच इन शब्दों को गलत नहीं मानेगी:

कॉपी मार्कडाउन को HTML एक्सटेंशन के रूप में स्थापित करें

इसके बाद, कॉपी मार्कडाउन को HTML एक्सटेंशन के रूप में स्थापित करें ताकि आप स्वरूपित मार्कडाउन को कॉपी और पेस्ट कर सकें।

डाउनलोड:मार्कडाउन को HTML के रूप में कॉपी करें VSCode एक्सटेंशन (फ्री)

  1. उपरोक्त अनुभागों से चरण 1 से 6 तक का पालन करें।
  2. चुनना jerriepelser.copy-markdown-as-html-1.1.0.vsix फ़ाइल जिसे आपने अभी डाउनलोड किया है।

अब आप मार्कडाउन को VSCode से कॉपी कर सकते हैं और इसे CMS में क्लीन HTML के रूप में पेस्ट कर सकते हैं। इसका परीक्षण करने के लिए:

  1. कुछ मार्कडाउन टेक्स्ट चुनें।
  2. खोलें कमांड पैलेट में राय मेनू, या दबाकर CTRL+Shift+P.
  3. चुनना मार्कडाउन: HTML के रूप में कॉपी करें:
  4. कॉपी किए गए मार्कडाउन को एक नई HTML फ़ाइल में पेस्ट करें।

आपको देखना चाहिए कि कॉपी किए गए मार्कडाउन को HTML के रूप में ठीक से चिपकाया गया था:

पूर्वावलोकन फलक को अनुकूलित करना

डिफ़ॉल्ट रूप से, पूर्वावलोकन फलक में वर्तमान VSCode थीम के समान शैली होगी।

हालांकि, आप चाहते हैं कि पूर्वावलोकन आपकी सामग्री के अंतिम गंतव्य को अधिक बारीकी से दर्शाएं। आप अपने मार्कडाउन को ऐसा दिखाने के लिए पूर्वावलोकन फलक को कस्टमाइज़ कर सकते हैं कि यह पहले से ही उस वेबसाइट पर है जिसे आप प्रकाशित कर रहे हैं।

आप अपनी इच्छानुसार किसी भी वेबसाइट का उपयोग कर सकते हैं; निम्नलिखित शैलियों को MUO से लिया गया था। अभी-अभी फोंट खोजने के लिए अपने ब्राउज़र के निरीक्षण तत्व उपकरण का उपयोग करें तथा किसी भी वेबसाइट से रंग चुनें.

  1. एक नई फाइल बनाएं और इसे कुछ इस तरह नाम दें "CustomStyles.css"
  2. फ़ाइल में निम्न उदाहरण CSS कोड पेस्ट करें:
    तन {
     पीछे का रंग: #fff;
     रंग: #2c2c2c;
     फ़ॉन्ट-परिवार: रोबोटो;
     फ़ॉन्ट-आकार: 18px;
     फ़ॉन्ट-वजन: 400;
    ऊंची लाईन: 1.7em;
     अधिकतम-चौड़ाई: 750px;
    }
    एच1 {
     फ़ॉन्ट-आकार: 38px;
     फ़ॉन्ट-वजन: 800;
    }
    

    एच2 {
     फ़ॉन्ट-आकार: 34px;
     फ़ॉन्ट-वजन: 700;
    }
    

    एच3 {
     फ़ॉन्ट-आकार: 24px;
     फ़ॉन्ट-वजन: 700;
    }
    

    एक {
     सीमा-निचला: 2पीएक्स ठोस #bf0d0b;
     रंग: #bf0d0b;
     फ़ॉन्ट-वजन: 700;
    }
    

    एक:होवर {
     रंग: #fff;
     पार्श्वभूमि: #bf0d0b;
    }
    बलवान {
     फोंट की मोटाई: बोल्ड;
    }
  3. फ़ाइल को बंद करें और सहेजें।
  4. पर क्लिक करें गियर निशान इंटरफ़ेस के निचले-बाएँ कोने में।
  5. पर क्लिक करें समायोजन.
  6. पर क्लिक करें एक्सटेंशन और फिर markdown.
  7. नीचे स्क्रॉल करें मार्कडाउन: शैलियाँ और क्लिक करें सामान जोडें.
  8. अपना पथ दर्ज करें CustomStyles.css फ़ाइल, उदाहरण के लिए:
    सी:\उपयोगकर्ताओं\एडम\कस्टम स्टाइलसीएसएस
  9. क्लिक ठीक है.

एक बार जब आप इन्हें बना लेते हैं, तो आपको एक पूर्वावलोकन फलक के साथ समाप्त होना चाहिए जो इस लेख की तरह दिखता है।

फिर से, मुझे MUO पर अपने ब्राउज़र के इंस्पेक्ट एलिमेंट टूल का उपयोग करके ये मान मिले, लेकिन आप अपनी खुद की गंतव्य वेबसाइट के लिए मान खोजना चाहेंगे।

संपादक थीम

डिफ़ॉल्ट VSCode थीम अंधेरे और प्रकाश दोनों में आती है, प्रत्येक के उच्च-विपरीत संस्करणों के साथ। लेकिन किसी भी अच्छे कोड संपादक की तरह, वहाँ हैं एक टन महान तृतीय-पक्ष थीम उपलब्ध हैं.

यदि आप किसी कोड संपादक के बजाय किसी वर्ड प्रोसेसर का लुक पसंद करते हैं, तो मैं huacat द्वारा Office थीम की अनुशंसा करता हूं:

यदि आप एक कोड संपादक पसंद करते हैं, तो सामान्य थीम जैसे ड्रैकुला, ग्रुवबॉक्स, सामग्री (नीचे स्क्रीनशॉट देखें), और नॉर्ड सभी एक्सटेंशन मार्केटप्लेस से उपलब्ध हैं।

एक नया विषय स्थापित करने के लिए:

  1. पर क्लिक करें गियर निशान इंटरफ़ेस के निचले-बाएँ कोने में।
  2. पर क्लिक करें एक्सटेंशन.
  3. उपर्युक्त विषयों में से कोई भी खोजें या श्रेणी को फ़िल्टर करने के लिए बस फ़िल्टर करें विषयों और जो उपलब्ध है उसे ब्राउज़ करें।

क्या VSCode अंतिम मार्कडाउन संपादक है?

तो, क्या VSCode वेब सामग्री के लिए अंतिम मार्कडाउन संपादक है? आउट-ऑफ-द-बॉक्स, शायद नहीं। लेकिन यह लगभग उतना ही एक्स्टेंसिबल है जितना कुछ भी हो सकता है।

वर्ड काउंटर, वर्तनी जांचकर्ता, मार्कडाउन को HTML के रूप में कॉपी करें, अनुकूलन का पूर्वावलोकन करें, और थीम बस सतह को खरोंचते हैं। VSCode के लिए एक्सटेंशन से भरा एक पारिस्थितिकी तंत्र उपलब्ध है, और आप इसे अपना बनाने के लिए स्वतंत्र हैं।