Ako zmeniť VSCode na konečný editor Markdown

Ako zmeniť VSCode na konečný editor Markdown

Ak píšete pre web, možno by ste sa mali pozrieť na Markdown. Existuje veľa aplikácií Markdown, ktoré sa starajú o autorov webu. Ale bezplatné editory kódu, ako je Visual Studio Code (VSCode) od Microsoftu, môžu byť ešte výkonnejšie.





VSCode rozumie Markdown a má vstavané nástroje na jeho náhľad v HTML. Môžete však pridať funkcie textového procesora, ako je počet slov a kontrola pravopisu. Môžete tiež povoliť prispôsobenia špecifické pre webovú lokalitu pre náhľad.



VYUŽITIE VIDEA DŇA

A nakoniec, schopnosť skopírovať Markdown ako HTML, aby ste ho mohli čisto vložiť do systému správy obsahu (CMS), je nevyhnutnosťou.





Stiahnite si a nainštalujte VSCode

Ak chcete začať, stiahnite si buď VSCode alebo jeho open source alternatívu VSCodium. Verzie každého z nich sú dostupné pre všetky hlavné operačné systémy pre stolné počítače.

Keď budete mať stiahnutý a nainštalovaný VSCode , spustite aplikáciu a začnite.



Predvolená uvítacia obrazovka VSCode.

Nainštalujte rozšírenie počtu slov

Začnite pridaním počítadla slov. Existuje veľa rozšírení, ktoré to riešia. Ten, ktorý najlepšie rozlišuje medzi skutočnými slovami a kódom alebo názvami súborov, je vlastné rozšírenie Word Counter od spoločnosti Microsoft.

Stiahnuť ▼: Počet slov Rozšírenie VSCode (zadarmo)



  1. Kliknite na Stiahnuť rozšírenie pod Zdroje v pravom dolnom paneli.
  2. Po stiahnutí prepnite na VSCode.
  3. Klikni na ikona ozubeného kolieska v ľavom dolnom rohu rozhrania.
  4. Kliknite na Rozšírenia .
  5. Kliknite na elipsu ( ... ) v hornej časti tably Rozšírenia.
  6. Kliknite Nainštalujte z VSIX . ​​​​​​​VSCode s rozšírením Word Count od spoločnosti Microsoft ukazuje, ako zisťuje počet slov vo vzorovom dokumente.
  7. Vyber ms-vscode.wordcount-*.vsix súbor, ktorý ste práve stiahli.

The Počet slov rozšírenie by teraz malo byť nainštalované. Otestujte to otvorením nového súboru Markdown a zadaním. Teraz by ste mali vidieť počítadlo slov v ľavej dolnej časti rozhrania:

​​​​​​​Označený dokument otvorený vo VSCode s pravopisnými chybami zistenými jemným modrým vlnitým podčiarknutím.

Nainštalujte rozšírenie Kontrola pravopisu

Budete tiež chcieť pridať funkciu kontroly pravopisu. Rovnako ako v prípade počítadiel slov, aj tu existuje veľa rozšírení, ktoré zvládajú kontrolu pravopisu. Najpopulárnejší je Kontrola pravopisu kódu od Street Side Software, pretože je k dispozícii v mnohých jazykoch.



Stiahnuť ▼: Kontrola pravopisu kódu Rozšírenie VSCode (zadarmo)

  1. Postupujte podľa krokov 1 až 6 z časti vyššie.
  2. Vyber streetsidesoftware.code-spell-checker-*.vsix súbor, ktorý ste práve stiahli.

The Kontrola pravopisu kódu rozšírenie by teraz malo byť nainštalované. Otestujte to otvorením nového súboru Markdown a zadaním nesprávne napísaných slov.

​​​​​​​Spodná pravá strana stavového riadku VSCode s indikátorom zobrazujúcim štyri pravopisné chyby.

Pod týmito slovami by ste mali vidieť modrú vlnitú čiaru spolu s počtom chýb v pravej dolnej časti rozhrania:

Otvorí sa súbor VSCode settings.json s pridaným vlastným kódom.

Prispôsobte chybovú vlnovku

Najväčší problém s týmto rozšírením Kontrola pravopisu je slabá modrá farba používaná pre vlnovku, ktorá identifikuje chyby. Má tendenciu splývať s pozadím tmavých tém a znovu sa používa pre iné prvky Markdown.

Môžete to skúsiť zmeniť na výraznú červenú farbu, akú by ste očakávali v textovom procesore:

  1. Klikni na ikona ozubeného kolieska v ľavom dolnom rohu rozhrania.
  2. Kliknite na nastavenie .
  3. Kliknite na Pracovný stôl , potom Vzhľad .
  4. Prejdite nadol na Prispôsobenie farieb : Dokument označenia otvorený vo VSCode s do očí bijúcimi preklepmi zistenými výrazným červeným vlnitým podčiarknutím.
  5. Kliknite Upravte v súbore settings.json .
  6. Prilepte nasledujúci kód do editora, ktorý sa otvorí na novej karte: 
    "editorInfo.foreground": "#ff0000"
    Dokument označenia otvorený vo VSCode s tromi pravopisnými chybami.
  7. a uložte súbor.

Ak teraz napíšete slovo nesprávne, VSCode ho ozdobí jasne červenou vlnovkou:

Správne naformátovaný dokument HTML otvorený vo VSCode.

Ignorovanie falošných pozitív

Kontrola pravopisu nemusí rozpoznať určité výrazy špecifické pre dané odvetvie alebo vlastné podstatné mená, ako sú názvy spoločností. Na snímke obrazovky vyššie napríklad VSCode zvýrazní skratku „distro“ ako preklep.

Ak nechcete, aby sa tieto slová považovali za chyby, pridajte ich do svojho Používateľské nastavenia .

  1. Kliknite pravým tlačidlom myši na slovo, ktoré má kontrola pravopisu ignorovať.
  2. Vznášať sa nad Pravopis a vyberte Pridajte slová do používateľských nastavení . ​​​​​​​Tento článok ako súbor označenia otvorený vo VSCode s predvoleným prehliadačom.

Odteraz už kontrola pravopisu nebude identifikovať tieto slová ako nesprávne:

​​​​​​​Ponuka VSCode Settings > Extensions > Markdown > Markdown: Styles.

Nainštalujte Copy Markdown ako rozšírenie HTML

Ďalej nainštalujte rozšírenie Kopírovať Markdown ako HTML, aby ste mohli kopírovať a prilepiť formátovaný Markdown.

Stiahnuť ▼: Skopírujte Markdown ako HTML Rozšírenie VSCode (zadarmo)

  1. Postupujte podľa krokov 1 až 6 z vyššie uvedených častí.
  2. Vyber jerriepelser.copy-markdown-as-html-1.1.0.vsix súbor, ktorý ste práve stiahli.

Teraz by ste mali byť schopní skopírovať Markdown z VSCode a vložiť ho do CMS ako čisté HTML. Ak chcete otestovať toto:

  1. Vyberte text Markdown.
  2. Otvor Paleta príkazov v vyhliadka menu alebo stlačením CTRL+Shift+P .
  3. Vyberte si Markdown: Kopírovať ako HTML : Tento článok ako súbor markdown otvorený vo VSCode s prehliadačom prispôsobeným tak, aby vyzeral ako MUO.
  4. Prilepte skopírovaný Markdown do nového súboru HTML.

Mali by ste vidieť, že skopírovaný Markdown bol správne vložený ako HTML:

Uvítacia obrazovka VSCode v svetlej téme.

Prispôsobenie tably náhľadu

Predvolene bude mať tabla ukážky rovnaký štýl ako aktuálna téma VSCode.

Označenie tohto článku sa otvára vo VSCode pomocou témy Office od huacat.

Možno však budete chcieť, aby ukážky lepšie odrážali konečný cieľ vášho obsahu. Tablu s ukážkou si môžete prispôsobiť tak, aby váš Markdown vyzeral, že už je na webovej lokalite, na ktorej publikujete.

Môžete použiť akúkoľvek webovú stránku, ktorú chcete; nasledujúce štýly boli prevzaté z MUO. Len na vyhľadanie fontov použite nástroj na kontrolu prvkov vášho prehliadača a vybrať farby z ľubovoľnej webovej stránky .

obnoviť heslo miestneho správcu Windows 10
  1. Vytvorte nový súbor a pomenujte ho ako ' CustomStyles.css '
  2. Do súboru prilepte nasledujúci vzorový kód 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. a uložte súbor.
  4. Klikni na ikona ozubeného kolieska v ľavom dolnom rohu rozhrania.
  5. Kliknite na nastavenie .
  6. Kliknite na Rozšírenia a potom Markdown .
  7. Prejdite nadol na Markdown: Štýly a kliknite Pridať položku .
  8. Zadajte svoju cestu CustomStyles.css súbor, napríklad: 
    C:\Users\Adam\CustomStyles.css
    Označenie tohto článku sa otvára vo VSCode pomocou témy Material od Equinusocia.
  9. Kliknite OK .

Keď to urobíte, mali by ste skončiť s tabuľou ukážky, ktorá vyzerá veľmi podobne ako tento článok.

Tieto hodnoty som opäť získal pomocou nástroja Inspect Element v mojom prehliadači na MUO, ale budete chcieť nájsť hodnoty pre svoju vlastnú cieľovú webovú stránku.

Témy editora

Predvolená téma VSCode sa dodáva v tme aj vo svetle, pričom každá z nich má vysoko kontrastné verzie. Ale ako každý dobrý editor kódu existujú k dispozícii množstvo skvelých tém tretích strán .

Ak dávate prednosť vzhľadu textového procesora pred editorom kódu, odporúčam tému Office od huacat:

Ak dávate prednosť editoru kódu, bežné témy ako Dracula, Gruvbox, Material (pozri snímku obrazovky nižšie) a Nord sú dostupné na trhu s rozšíreniami.

Ak chcete nainštalovať novú tému:

  1. Klikni na ikona ozubeného kolieska v ľavom dolnom rohu rozhrania.
  2. Kliknite na Rozšírenia .
  3. Vyhľadajte niektorý z vyššie uvedených motívov alebo jednoducho vyfiltrujte kategóriu podľa témy a prehliadať, čo je k dispozícii.

Je VSCode konečným editorom Markdown?

Je teda VSCode dokonalým editorom Markdown pre webový obsah? Po vybalení pravdepodobne nie. Je však tak rozšíriteľný, ako len môže byť.

Počítadlá slov, kontrola pravopisu, kopírovanie Markdown ako HTML, ukážky prispôsobení a motívy sú len škrabadlá na povrchu. Pre VSCode je k dispozícii ekosystém plný rozšírení a môžete si ho vytvoriť podľa seba.