Ինչպես VSCode-ը վերածել վերջնական Markdown խմբագրի

Visual Studio Code-ն արդեն հիանալի Markdown խմբագիր է, բայց այս ընդարձակումները և հարմարեցումները այն ավելի լավ են դարձնում:

Եթե դուք գրում եք համացանցի համար, գուցե ցանկանաք փնտրել Markdown-ը: Կան բազմաթիվ Markdown հավելվածներ, որոնք սպասարկում են վեբ գրողներին: Սակայն անվճար կոդերի խմբագրիչները, ինչպիսին է Microsoft-ի Visual Studio Code-ը (VSCode), կարող են էլ ավելի հզոր լինել:

VSCode-ը հասկանում է Markdown-ը և ունի ներկառուցված գործիքներ՝ այն HTML-ում նախադիտելու համար: Այնուամենայնիվ, դուք կարող եք ավելացնել բառ մշակողի գործառույթներ, ինչպիսիք են բառերի հաշվարկը և ուղղագրության ստուգիչը: Կարող եք նաև միացնել կայքի հատուկ հարմարեցումները նախադիտողի համար:

Վերջապես, Markdown-ը որպես HTML պատճենելու հնարավորությունը, որպեսզի կարողանաք այն մաքուր կերպով տեղադրել Բովանդակության կառավարման համակարգում (CMS) պարտադիր է:

Ներբեռնեք և տեղադրեք VSCode-ը

Սկսելու համար ներբեռնեք կամ VSCode կամ դրա բաց կոդով այլընտրանքային VSCodium: Յուրաքանչյուրի տարբերակները հասանելի են բոլոր հիմնական աշխատասեղանի օպերացիոն համակարգերի համար:

Երբ ներբեռնեք և տեղադրեք VSCode-ը, գործարկեք հավելվածը սկսելու համար:

Տեղադրեք Word Count Extension-ը

Սկսեք ավելացնելով բառերի հաշվիչ: Կան բազմաթիվ ընդարձակումներ, որոնք լուծում են դա: Այն մեկը, որը լավագույնս տարբերում է իրական բառերը և կոդը կամ ֆայլերի անունները, Microsoft-ի սեփական Word Counter ընդլայնումն է:

Ներբեռնում՝ Word Count VSCode Extension (անվճար)

1. Կտտացրեք Ներբեռնել ընդլայնումը՝ ներքևի աջ մասում գտնվող Պաշարներ բաժնում:
2. Ներբեռնվելուց հետո անցեք VSCode-ին:
3. Սեղմեք փոխանցման պատկերակը միջերեսի ստորին ձախ անկյունում:
4. Սեղմեք Ընդլայնումներ:
5. Սեղմեք էլիպսիսը (...) Ընդլայնումների վահանակի վերևի մոտ:

6. Սեղմեք Տեղադրել VSIX-ից:

   

7. Ընտրեք ms-vscode.wordcount-*.vsix ֆայլը, որը նոր եք ներբեռնել:

Այժմ պետք է տեղադրվի Բառերի քանակի ընդլայնումը: Փորձարկեք այն՝ բացելով նոր Markdown ֆայլ և մուտքագրելով: Այժմ դուք պետք է տեսնեք բառերի հաշվիչ ինտերֆեյսի ներքևի ձախ կողմում.

Տեղադրեք ուղղագրության ստուգման ընդլայնումը

Դուք նաև կցանկանաք ավելացնել ուղղագրության ստուգման գործառույթը: Ինչպես բառերի հաշվիչների դեպքում, կան բազմաթիվ ընդարձակումներ, որոնք կարգավորում են ուղղագրության ստուգումը: Ամենատարածվածը Կոդերի ուղղագրության ստուգումն է Street Side Software-ի կողմից, քանի որ այն հասանելի է բազմաթիվ լեզուներով:

Ներբեռնում՝ Կոդի ուղղագրության ստուգում VSCode ընդլայնում (անվճար)

1. Հետևեք 1-ից 6-րդ քայլերին վերևի բաժնից:
2. Ընտրեք streetsidesoftware.code-spell-checker-*.vsix ֆայլը, որը նոր եք ներբեռնել:

Այժմ պետք է տեղադրվի Կոդերի ուղղագրության ստուգում ընդլայնումը: Փորձեք այն՝ բացելով նոր Markdown ֆայլ և մուտքագրելով սխալ գրված բառեր:

Այս բառերի տակ դուք պետք է տեսնեք կապույտ գիծ, ինչպես նաև ինտերֆեյսի ներքևի աջ կողմում գտնվող սխալների քանակը.

Անհատականացրեք Error Squiggle-ը

Ուղղագրության ստուգման այս ընդլայնման ամենամեծ խնդիրն այն թույլ կապույտ գույնն է, որն օգտագործվում է սխալները բացահայտող սկյուռի համար: Այն հակված է միաձուլվել մութ թեմաների ֆոնին և կրկին օգտագործվում է Markdown-ի այլ տարրերի համար:

Դուք կարող եք փորձել փոխել այն կարմիր գույնի, որը դուք կակնկալեիք տեսնել բառի պրոցեսորում.

1. Սեղմեք փոխանցման պատկերակը միջերեսի ստորին ձախ անկյունում:
2. Սեղմեք Կարգավորումներ:
3. Սեղմեք Աշխատանքային նստարան, ապա Արտաքին տեսք:

4. Ոլորեք ներքև դեպի Գույնի հարմարեցում՝

5. Սեղմեք Խմբագրել settings.json-ում:

6. Տեղադրեք հետևյալ կոդը նոր ներդիրում բացվող խմբագրում.

   "editorInfo.foreground": "#ff0000"

   

7. Փակեք և պահեք ֆայլը:

Այժմ, եթե դուք սխալ եք գրում բառը, VSCode-ը այն կզարդարի վառ կարմիր կծիկով.

Անտեսելով կեղծ դրականները

Ուղղագրիչը կարող է չճանաչել ոլորտին հատուկ տերմիններ կամ հատուկ անուններ, ինչպիսիք են ընկերության անվանումները: Վերևի սքրինշոթում, օրինակ, VSCode-ն ընդգծում է «distro» հապավումը որպես ուղղագրական սխալ:

Այս բառերը որպես սխալ չտեսնելու համար դուք պետք է դրանք ավելացնեք ձեր Օգտվողի կարգավորումներում:

1. Աջ սեղմեք այն բառի վրա, որը ցանկանում եք, որ ուղղագրիչը անտեսի:

2. Սավառնեք Ուղղագրության վրա և ընտրեք Ավելացնել բառեր օգտվողի կարգավորումներում:

   

Այսուհետ ուղղագրության ստուգումն այլևս չի ճանաչի այս բառերը որպես սխալ.

Տեղադրեք Copy Markdown-ը որպես HTML ընդլայնում

Հաջորդը, տեղադրեք Copy Markdown-ը որպես HTML ընդլայնում, որպեսզի կարողանաք պատճենել և տեղադրել ձևաչափված Markdown-ը:

Ներբեռնում՝ Պատճենել Markdown-ը որպես HTML VSCode ընդլայնում (անվճար)

1. Հետևեք 1-ից 6-րդ քայլերին վերը նշված բաժիններից:
2. Ընտրեք jerriepelser.copy-markdown-as-html-1.1.0.vsix ֆայլը, որը նոր եք ներբեռնել:

Այժմ դուք պետք է կարողանաք պատճենել Markdown-ը VSCode-ից և տեղադրել այն CMS-ում՝ որպես մաքուր HTML: Սա փորձարկելու համար.

1. Ընտրեք որոշ Markdown տեքստ:
2. Բացեք Հրամանների պալիտրա Դիտել ընտրացանկում կամ սեղմելով CTRL+Shift+P:

3. Ընտրեք Markdown. Պատճենել որպես HTML:

   

4. Տեղադրեք պատճենված Markdown-ը նոր HTML ֆայլի մեջ:

Դուք պետք է տեսնեք, որ պատճենված Markdown-ը պատշաճ կերպով տեղադրվել է որպես HTML.

Նախադիտման վահանակի անհատականացում

Լռելյայնորեն, նախադիտման վահանակը կունենա նույն ոճը, ինչ ընթացիկ VSCode թեման:

Այնուամենայնիվ, դուք կարող եք ցանկանալ, որ նախադիտումները ավելի սերտորեն արտացոլեն ձեր բովանդակության վերջնական նպատակակետը: Դուք կարող եք հարմարեցնել նախադիտման վահանակը, որպեսզի ձեր Markdown-ը թվա, թե այն արդեն գտնվում է այն կայքում, որտեղ դուք հրապարակում եք:

Դուք կարող եք օգտագործել ցանկացած կայք, որը ցանկանում եք; Հետևյալ ոճերը վերցվել են 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. Սեղմեք Ընդլայնումներ և ապա Markdown:
7. Ոլորեք ներքև դեպի Markdown. Styles և սեղմեք Ավելացնել տարր:

8. Մուտքագրեք ձեր CustomStyles.css ֆայլի ուղին, օրինակ՝

   C:\Users\Adam\CustomStyles.css

9. Սեղմեք OK:

Երբ դուք դրանք պատրաստեք, դուք պետք է ավարտեք նախադիտման վահանակ, որը շատ նման է այս հոդվածին:

Կրկին, ես ստացել եմ այս արժեքները՝ օգտագործելով իմ բրաուզերի Inspect Element գործիքը MUO-ում, բայց դուք կցանկանաք գտնել արժեքները ձեր սեփական նպատակակետի կայքի համար:

Խմբագրի թեմաներ

Լռելյայն VSCode թեման գալիս է ինչպես մուգ, այնպես էլ բաց գույներով՝ յուրաքանչյուրի բարձր կոնտրաստ տարբերակներով: Բայց ինչպես ցանկացած լավ կոդի խմբագիր, կան նաև երրորդ կողմի հիանալի թեմաներ:

Եթե նախընտրում եք Word Processor-ի տեսքը, քան կոդերի խմբագրիչը, ես խորհուրդ եմ տալիս Office թեման huacat-ի կողմից.

Եթե նախընտրում եք կոդերի խմբագրիչ, ընդհանուր թեմաները, ինչպիսիք են Dracula, Gruvbox, Material (տե՛ս ստորև ներկայացված սքրինշոթը) և Nord-ը, բոլորը հասանելի են ընդարձակման շուկայում:

Նոր թեմա տեղադրելու համար՝

1. Սեղմեք փոխանցման պատկերակը միջերեսի ստորին ձախ անկյունում:
2. Սեղմեք Ընդլայնումներ:
3. Որոնեք վերը նշված թեմաներից որևէ մեկը կամ պարզապես զտեք կատեգորիան թեմաների և դիտեք այն, ինչ հասանելի է:

Արդյո՞ք VSCode-ը վերջնական Markdown խմբագիրն է:

Այսպիսով, VSCode-ը Markdown-ի վերջնական խմբագիրն է վեբ բովանդակության համար: Առանց տուփի, հավանաբար ոչ: Բայց դա մոտավորապես այնքան ընդարձակելի է, որքան ցանկացած բան կարող է լինել:

Բառերի հաշվիչները, ուղղագրիչները, Պատճենել Markdown-ը որպես HTML, նախադիտման հարմարեցումները և թեմաները պարզապես քերծում են մակերեսը: VSCode-ի համար հասանելի է ընդլայնումներով լի էկոհամակարգ, և դուք ազատ եք այն դարձնել ձեր սեփականը: