VSCodeని అల్టిమేట్ మార్క్‌డౌన్ ఎడిటర్‌గా మార్చడం ఎలా

VSCodeని అల్టిమేట్ మార్క్‌డౌన్ ఎడిటర్‌గా మార్చడం ఎలా

మీరు వెబ్ కోసం వ్రాస్తే, మీరు మార్క్‌డౌన్‌ను పరిశీలించాలనుకోవచ్చు. వెబ్ రైటర్‌లకు ఉపయోగపడే మార్క్‌డౌన్ యాప్‌లు పుష్కలంగా ఉన్నాయి. కానీ Microsoft యొక్క విజువల్ స్టూడియో కోడ్ (VSCode) వంటి ఉచిత కోడ్ ఎడిటర్లు మరింత శక్తివంతమైనవి.





VSCode మార్క్‌డౌన్‌ను అర్థం చేసుకుంటుంది మరియు HTMLలో పరిదృశ్యం చేయడానికి అంతర్నిర్మిత సాధనాలను కలిగి ఉంది. అయితే, మీరు వర్డ్ కౌంట్ మరియు స్పెల్ చెకర్ వంటి వర్డ్ ప్రాసెసర్ కార్యాచరణను జోడించవచ్చు. మీరు ప్రివ్యూయర్ కోసం వెబ్‌సైట్-నిర్దిష్ట అనుకూలీకరణలను కూడా ప్రారంభించాలనుకోవచ్చు.





రోజు యొక్క వీడియోను తయారు చేయండి

చివరగా, మార్క్‌డౌన్‌ను HTMLగా కాపీ చేయగల సామర్థ్యం తప్పనిసరి కాబట్టి మీరు దానిని కంటెంట్ మేనేజ్‌మెంట్ సిస్టమ్ (CMS)లో శుభ్రంగా అతికించవచ్చు.





VSCodeని డౌన్‌లోడ్ చేసి, ఇన్‌స్టాల్ చేయండి

ప్రారంభించడానికి, VSCode లేదా దాని ఓపెన్ సోర్స్ ప్రత్యామ్నాయ VSCodiumని డౌన్‌లోడ్ చేయండి. ప్రతి యొక్క సంస్కరణలు అన్ని ప్రధాన డెస్క్‌టాప్ ఆపరేటింగ్ సిస్టమ్‌లకు అందుబాటులో ఉన్నాయి.

గేమింగ్ కోసం PC ని ఎలా ఆప్టిమైజ్ చేయాలి

ఒకసారి మీరు VSCodeని డౌన్‌లోడ్ చేసి, ఇన్‌స్టాల్ చేసారు , ప్రారంభించడానికి అప్లికేషన్‌ను అమలు చేయండి.



  VSCode డిఫాల్ట్ స్వాగత స్క్రీన్.

వర్డ్ కౌంట్ ఎక్స్‌టెన్షన్‌ని ఇన్‌స్టాల్ చేయండి

వర్డ్ కౌంటర్‌ని జోడించడం ద్వారా ప్రారంభించండి. దీన్ని నిర్వహించే అనేక పొడిగింపులు అందుబాటులో ఉన్నాయి. వాస్తవ పదాలు మరియు కోడ్ లేదా ఫైల్ పేర్ల మధ్య ఉత్తమమైన భేదం Microsoft యొక్క స్వంత Word Counter పొడిగింపు.

డౌన్‌లోడ్: పదాల లెక్క VSCode పొడిగింపు (ఉచితం)





  1. నొక్కండి పొడిగింపును డౌన్‌లోడ్ చేయండి కింద వనరులు దిగువ కుడి చేతి పేన్‌లో.
  2. డౌన్‌లోడ్ చేసిన తర్వాత, VSCodeకి మారండి.
  3. పై క్లిక్ చేయండి గేర్ చిహ్నం ఇంటర్ఫేస్ యొక్క దిగువ-ఎడమ మూలలో.
  4. నొక్కండి పొడిగింపులు .
  5. ఎలిప్సిస్ క్లిక్ చేయండి ( ... ) పొడిగింపుల పేన్ ఎగువన.
  6. క్లిక్ చేయండి VSIX నుండి ఇన్‌స్టాల్ చేయండి .   మైక్రోసాఫ్ట్ వర్డ్ కౌంట్ ఎక్స్‌టెన్షన్‌తో కూడిన VSCode నమూనా పత్రంలోని పదాల సంఖ్యను గుర్తించడం చూపిస్తుంది.
  7. ఎంచుకోండి ms-vcode.wordcount-*.vsix మీరు ఇప్పుడే డౌన్‌లోడ్ చేసిన ఫైల్.

ది పదాల లెక్క పొడిగింపు ఇప్పుడు ఇన్స్టాల్ చేయబడాలి. కొత్త మార్క్‌డౌన్ ఫైల్‌ని తెరిచి టైప్ చేయడం ద్వారా దీన్ని పరీక్షించండి. మీరు ఇప్పుడు ఇంటర్‌ఫేస్ యొక్క దిగువ ఎడమ వైపున వర్డ్ కౌంటర్‌ని చూడాలి:

  మృదువైన నీలి రంగు స్క్విగ్లీ అండర్‌లైన్ ద్వారా గుర్తించబడిన అక్షరదోషాలతో VSCodeలో మార్క్‌డౌన్ డాక్యుమెంట్ తెరవబడింది.

స్పెల్ చెక్ ఎక్స్‌టెన్షన్‌ని ఇన్‌స్టాల్ చేయండి

మీరు స్పెల్ చెక్ ఫంక్షనాలిటీని కూడా జోడించాలనుకుంటున్నారు. వర్డ్ కౌంటర్‌ల మాదిరిగానే, స్పెల్ చెకింగ్‌ను నిర్వహించే అనేక పొడిగింపులు ఉన్నాయి. అత్యంత ప్రసిద్ధమైనది కోడ్ స్పెల్ చెక్ స్ట్రీట్ సైడ్ సాఫ్ట్‌వేర్ ద్వారా ఇది అనేక భాషలలో అందుబాటులో ఉంది.





డౌన్‌లోడ్: కోడ్ స్పెల్ చెక్ VSCode పొడిగింపు (ఉచితం)

  1. పై విభాగం నుండి 1 నుండి 6 దశలను అనుసరించండి.
  2. ఎంచుకోండి streetsidesoftware.code-spell-checker-*.vsix మీరు ఇప్పుడే డౌన్‌లోడ్ చేసిన ఫైల్.

ది కోడ్ స్పెల్ చెక్ పొడిగింపు ఇప్పుడు ఇన్స్టాల్ చేయబడాలి. కొత్త మార్క్‌డౌన్ ఫైల్‌ని తెరిచి, అక్షరదోష పదాలను టైప్ చేయడం ద్వారా దీన్ని పరీక్షించండి.

  నాలుగు స్పెల్లింగ్ లోపాలను చూపించే సూచికతో VSCode స్థితి పట్టీ యొక్క దిగువ కుడి వైపు.

ఇంటర్‌ఫేస్‌కి దిగువన కుడి వైపున ఉన్న ఎర్రర్‌ల గణనతో పాటు ఆ పదాల క్రింద నీలిరంగు స్క్విగ్లీ లైన్‌ను మీరు చూడాలి:

  జోడించిన అనుకూల కోడ్‌తో VSCode settings.json ఫైల్ తెరవబడింది.

ఎర్రర్ స్క్విగల్‌ని అనుకూలీకరించండి

ఈ స్పెల్ చెక్ ఎక్స్‌టెన్షన్‌తో ఉన్న అతిపెద్ద సమస్య ఏమిటంటే ఎర్రర్‌లను గుర్తించే స్క్విగల్ కోసం ఉపయోగించే బలహీనమైన నీలం రంగు. ఇది డార్క్ థీమ్‌ల నేపథ్యంలో మిళితం అవుతుంది మరియు ఇతర మార్క్‌డౌన్ ఎలిమెంట్స్ కోసం మళ్లీ ఉపయోగించబడుతుంది.

మీరు వర్డ్ ప్రాసెసర్‌లో చూడాలనుకుంటున్నట్లుగా బోల్డ్ రెడ్ కలర్‌కి మార్చడానికి ప్రయత్నించవచ్చు:

  1. పై క్లిక్ చేయండి గేర్ చిహ్నం ఇంటర్ఫేస్ యొక్క దిగువ-ఎడమ మూలలో.
  2. నొక్కండి సెట్టింగ్‌లు .
  3. నొక్కండి వర్క్‌బెంచ్ , అప్పుడు స్వరూపం .
  4. క్రిందికి స్క్రోల్ చేయండి రంగు అనుకూలీకరణ :   బలమైన ఎరుపు స్క్విగ్లీ అండర్‌లైన్ ద్వారా గుర్తించబడిన స్పష్టమైన అక్షరదోషాలతో VSCodeలో మార్క్‌డౌన్ డాక్యుమెంట్ తెరవబడింది.
  5. క్లిక్ చేయండి settings.jsonలో సవరించండి .
  6. కింది కోడ్‌ని కొత్త ట్యాబ్‌లో తెరిచే ఎడిటర్‌లో అతికించండి:
    "editorInfo.foreground": "#ff0000"
      మూడు స్పెల్లింగ్ లోపాలతో VSCodeలో మార్క్‌డౌన్ డాక్యుమెంట్ తెరవబడింది.
  7. మరియు ఫైల్‌ను సేవ్ చేయండి.

ఇప్పుడు మీరు ఒక పదాన్ని తప్పుగా వ్రాసినట్లయితే, VSCode దానిని ప్రకాశవంతమైన ఎరుపు రంగు స్క్విగ్ల్‌తో అలంకరిస్తుంది:

  సరిగ్గా ఫార్మాట్ చేయబడిన HTML పత్రం VSCodeలో తెరవబడింది.

తప్పుడు పాజిటివ్‌లను విస్మరించడం

స్పెల్ చెకర్ నిర్దిష్ట పరిశ్రమ-నిర్దిష్ట నిబంధనలను లేదా కంపెనీ పేర్ల వంటి సరైన నామవాచకాలను గుర్తించకపోవచ్చు. ఎగువ స్క్రీన్‌షాట్‌లో, ఉదాహరణకు, VSCode 'డిస్ట్రో' అనే సంక్షిప్త అక్షరాన్ని తప్పు స్పెల్లింగ్‌గా హైలైట్ చేస్తుంది.

ఈ పదాలను ఎర్రర్‌లుగా చూడడాన్ని ఆపడానికి, మీరు వాటిని మీకు జోడించాలనుకుంటున్నారు వినియోగదారు సెట్టింగ్‌లు .

  1. స్పెల్ చెకర్ విస్మరించాలనుకుంటున్న పదంపై కుడి-క్లిక్ చేయండి.
  2. గాలిలో తేలియాడు స్పెల్లింగ్ మరియు ఎంచుకోండి వినియోగదారు సెట్టింగ్‌లకు పదాలను జోడించండి .   డిఫాల్ట్ ప్రివ్యూయర్‌తో VSCodeలో తెరవబడిన మార్క్‌డౌన్ ఫైల్‌గా ఈ కథనం.

ఇప్పటి నుండి, స్పెల్ చెక్ ఈ పదాలను తప్పుగా గుర్తించదు:

  VSCode సెట్టింగ్‌లు > పొడిగింపులు > మార్క్‌డౌన్ > మార్క్‌డౌన్: స్టైల్స్ మెను.

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 వలె కాపీ చేయండి :   MUO లాగా కనిపించేలా అనుకూలీకరించిన ప్రివ్యూయర్‌తో VSCodeలో తెరవబడిన మార్క్‌డౌన్ ఫైల్‌గా ఈ కథనం.
  4. కాపీ చేసిన మార్క్‌డౌన్‌ను కొత్త HTML ఫైల్‌లో అతికించండి.

కాపీ చేయబడిన మార్క్‌డౌన్ సరిగ్గా HTML వలె అతికించబడిందని మీరు చూడాలి:

  లైట్ థీమ్‌లో VSCode స్వాగత స్క్రీన్.

ప్రివ్యూ పేన్‌ని అనుకూలీకరించడం

డిఫాల్ట్‌గా, ప్రివ్యూ పేన్ ప్రస్తుత VSCode థీమ్ వలె అదే శైలిని కలిగి ఉంటుంది.

  huacat ద్వారా Office థీమ్‌ని ఉపయోగించి VSCodeలో ఈ కథనం యొక్క మార్క్‌డౌన్ తెరవబడుతుంది.

అయితే, మీరు మీ కంటెంట్ యొక్క అంతిమ గమ్యాన్ని మరింత దగ్గరగా ప్రతిబింబించేలా ప్రివ్యూలను కోరుకోవచ్చు. మీరు ప్రచురించే వెబ్‌సైట్‌లో మీ మార్క్‌డౌన్ ఇప్పటికే ఉన్నట్లు కనిపించేలా చేయడానికి మీరు ప్రివ్యూ పేన్‌ను అనుకూలీకరించవచ్చు.

మీకు కావలసిన వెబ్‌సైట్‌ను మీరు ఉపయోగించవచ్చు; క్రింది శైలులు MUO నుండి తీసుకోబడ్డాయి. కేవలం ఫాంట్‌లను కనుగొనడానికి మీ బ్రౌజర్ యొక్క తనిఖీ మూలకం సాధనాన్ని ఉపయోగించండి మరియు ఏదైనా వెబ్‌సైట్ నుండి రంగులను ఎంచుకోండి .

  1. కొత్త ఫైల్‌ని సృష్టించి, దానికి '' అని పేరు పెట్టండి CustomStyles.css '
  2. కింది ఉదాహరణ CSS కోడ్‌ను ఫైల్‌లో అతికించండి:
    body { 
    background-color: #fff;
    color: #2c2c2c;
    font-family: Roboto;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7em;
    max-width: 750px;
    }

    h1 {
    font-size: 38px;
    font-weight: 800;
    }

    h2 {
    font-size: 34px;
    font-weight: 700;
    }

    h3 {
    font-size: 24px;
    font-weight: 700;
    }

    a {
    border-bottom: 2px solid #bf0d0b;
    color: #bf0d0b;
    font-weight: 700;
    }

    a:hover {
    color: #fff;
    background: #bf0d0b;
    }

    strong {
    font-weight: bold;
    }
  3. మరియు ఫైల్‌ను సేవ్ చేయండి.
  4. పై క్లిక్ చేయండి గేర్ చిహ్నం ఇంటర్ఫేస్ యొక్క దిగువ-ఎడమ మూలలో.
  5. నొక్కండి సెట్టింగ్‌లు .
  6. నొక్కండి పొడిగింపులు ఆపై మార్క్డౌన్ .
  7. క్రిందికి స్క్రోల్ చేయండి మార్క్డౌన్: స్టైల్స్ మరియు క్లిక్ చేయండి వస్తువు జోడించు .
  8. మీ మార్గాన్ని నమోదు చేయండి CustomStyles.css ఫైల్, ఉదాహరణకు:
    C:\Users\Adam\CustomStyles.css
      Equinusocio ద్వారా మెటీరియల్ థీమ్‌ని ఉపయోగించి VSCodeలో ఈ కథనం యొక్క మార్క్‌డౌన్ తెరవబడింది.
  9. క్లిక్ చేయండి అలాగే .

మీరు వీటిని రూపొందించిన తర్వాత, మీరు ఈ కథనం వలె కనిపించే ప్రివ్యూ పేన్‌తో ముగించాలి.

మళ్ళీ, MUOలో నా బ్రౌజర్ యొక్క ఇన్‌స్పెక్ట్ ఎలిమెంట్ సాధనాన్ని ఉపయోగించడం ద్వారా నేను ఈ విలువలను పొందాను, కానీ మీరు మీ స్వంత గమ్యస్థాన వెబ్‌సైట్ కోసం విలువలను కనుగొనాలనుకుంటున్నారు.

ఎడిటర్ థీమ్స్

డిఫాల్ట్ VSCode థీమ్ డార్క్ మరియు లైట్ రెండింటిలోనూ వస్తుంది, ప్రతి దాని యొక్క అధిక-కాంట్రాస్ట్ వెర్షన్‌లతో. కానీ ఏదైనా మంచి కోడ్ ఎడిటర్ లాగా, ఉన్నాయి ఒక టన్ను గొప్ప మూడవ పక్ష థీమ్‌లు అందుబాటులో ఉన్నాయి .

మీరు కోడ్ ఎడిటర్ కంటే వర్డ్ ప్రాసెసర్ రూపాన్ని ఇష్టపడితే, నేను huacat ద్వారా Office థీమ్‌ని సిఫార్సు చేస్తున్నాను:

మీరు కోడ్ ఎడిటర్‌ను ఇష్టపడితే, డ్రాక్యులా, గ్రువ్‌బాక్స్, మెటీరియల్ (క్రింద స్క్రీన్‌షాట్ చూడండి) మరియు నోర్డ్ వంటి సాధారణ థీమ్‌లు పొడిగింపుల మార్కెట్‌ప్లేస్ నుండి అందుబాటులో ఉంటాయి.

కొత్త థీమ్‌ను ఇన్‌స్టాల్ చేయడానికి:

  1. పై క్లిక్ చేయండి గేర్ చిహ్నం ఇంటర్ఫేస్ యొక్క దిగువ-ఎడమ మూలలో.
  2. నొక్కండి పొడిగింపులు .
  3. పైన పేర్కొన్న ఏదైనా థీమ్‌ల కోసం శోధించండి లేదా వర్గాన్ని ఫిల్టర్ చేయండి థీమ్స్ మరియు అందుబాటులో ఉన్న వాటిని బ్రౌజ్ చేయండి.

VSCode అల్టిమేట్ మార్క్‌డౌన్ ఎడిటర్?

కాబట్టి, వెబ్ కంటెంట్ కోసం VSCode అంతిమ మార్క్‌డౌన్ ఎడిటర్‌గా ఉందా? అవుట్-ఆఫ్-ది-బాక్స్, బహుశా కాదు. కానీ ఇది ఏదైనా కావచ్చు వంటి విస్తరించదగినది.

వర్డ్ కౌంటర్‌లు, స్పెల్ చెకర్‌లు, మార్క్‌డౌన్‌ను HTMLగా కాపీ చేయండి, అనుకూలీకరణలను పరిదృశ్యం చేయండి మరియు థీమ్‌లు కేవలం ఉపరితలంపై స్క్రాచ్ చేస్తాయి. VSCode కోసం పొడిగింపులతో నిండిన పర్యావరణ వ్యవస్థ అందుబాటులో ఉంది మరియు మీరు దీన్ని మీ స్వంతం చేసుకోవచ్చు.