Jak změnit VSCode na Ultimate Markdown Editor

Jak změnit VSCode na Ultimate Markdown Editor

Pokud píšete pro web, možná se budete chtít podívat na Markdown. Existuje spousta aplikací Markdown, které se starají o webové autory. Ale bezplatné editory kódu, jako je Microsoft Visual Studio Code (VSCode), mohou být ještě výkonnější.





VSCode rozumí Markdown a má vestavěné nástroje pro jeho náhled v HTML. Můžete však přidat funkce textového procesoru, jako je počet slov a kontrola pravopisu. Můžete také chtít povolit přizpůsobení specifická pro web pro náhled.



VYUŽÍVÁNÍ VIDEA DNE

A konečně, schopnost zkopírovat Markdown jako HTML, abyste jej mohli čistě vložit do systému správy obsahu (CMS), je nutností.





Stáhněte a nainstalujte VSCode

Chcete-li začít, stáhněte si buď VSCode nebo jeho open source alternativu VSCodium. Verze každého z nich jsou k dispozici pro všechny hlavní operační systémy pro stolní počítače.

Jakmile budete mít stáhli a nainstalovali VSCode , spusťte aplikaci a začněte.



Výchozí uvítací obrazovka VSCode.

Nainstalujte rozšíření počtu slov

Začněte přidáním počítadla slov. Existuje mnoho dostupných rozšíření, která to zvládnou. Ten, který nejlépe rozlišuje mezi skutečnými slovy a kódem nebo názvy souborů, je vlastní rozšíření Word Counter společnosti Microsoft.

Stažení: Počet slov Rozšíření VSCode (zdarma)



  1. Klikněte na Stáhnout rozšíření pod Zdroje v pravém dolním panelu.
  2. Po stažení přepněte na VSCode.
  3. Klikněte na ikona ozubeného kola v levém dolním rohu rozhraní.
  4. Klikněte na Rozšíření .
  5. Klikněte na elipsu ( ... ) v horní části podokna Rozšíření.
  6. Klikněte Nainstalujte z VSIX . ​​​​​​​VSCode s rozšířením Word Count od Microsoftu ukazuje, jak detekuje počet slov ve vzorovém dokumentu.
  7. Vyber ms-vscode.wordcount-*.vsix soubor, který jste právě stáhli.

The Počet slov rozšíření by nyní mělo být nainstalováno. Otestujte to otevřením nového souboru Markdown a zadáním. Nyní byste měli vidět počítadlo slov v levé dolní části rozhraní:

​​​​​​​Označený dokument otevřený ve VSCode s překlepy zjištěnými jemným modrým klikatým podtržením.

Nainstalujte rozšíření kontroly pravopisu

Budete také chtít přidat funkci kontroly pravopisu. Stejně jako u počítadel slov existuje mnoho rozšíření, která zvládnou kontrolu pravopisu. Nejoblíbenější je Kontrola pravopisu kódu od Street Side Software, protože je k dispozici v mnoha jazycích.



Stažení: Kontrola pravopisu kódu Rozšíření VSCode (zdarma)

  1. Postupujte podle kroků 1 až 6 z výše uvedené části.
  2. Vyber streetsidesoftware.code-spell-checker-*.vsix soubor, který jste právě stáhli.

The Kontrola pravopisu kódu rozšíření by nyní mělo být nainstalováno. Otestujte to otevřením nového souboru Markdown a zadáním chybně napsaných slov.

​​​​​​​V pravé dolní části stavového řádku VSCode s indikátorem zobrazujícím čtyři pravopisné chyby.

Pod těmito slovy byste měli vidět modrou klikatou čáru spolu s počtem chyb v pravé dolní části rozhraní:

Otevře se soubor VSCode settings.json s přidaným vlastním kódem.

Přizpůsobte chybovou vlnovku

Největším problémem tohoto rozšíření Kontrola pravopisu je slabá modrá barva používaná pro klikyháky, které identifikují chyby. Má tendenci splývat s pozadím temných témat a je znovu použit pro další prvky Markdown.

Můžete to zkusit změnit na tučně červenou barvu, kterou byste očekávali v textovém procesoru:

  1. Klikněte na ikona ozubeného kola v levém dolním rohu rozhraní.
  2. Klikněte na Nastavení .
  3. Klikněte na pracovní stůl , pak Vzhled .
  4. Přejděte dolů na Přizpůsobení barev : Dokument markdown otevřený ve VSCode se zjevnými překlepy zjištěnými silným červeným klikatým podtržením.
  5. Klikněte Upravte v settings.json .
  6. Vložte následující kód do editoru, který se otevře na nové kartě: 
    "editorInfo.foreground": "#ff0000"
    Dokument markdown otevřený ve VSCode se třemi pravopisnými chybami.
  7. a uložte soubor.

Pokud nyní napíšete nějaké slovo špatně, VSCode ho ozdobí jasně červenou vlnovkou:

Správně naformátovaný dokument HTML otevřený ve VSCode.

Ignorování falešných pozitiv

Kontrola pravopisu nemusí rozpoznat určité výrazy specifické pro dané odvětví nebo vlastní podstatná jména, jako jsou názvy společností. Na výše uvedeném snímku obrazovky například VSCode zvýrazní zkratku „distro“ jako překlep.

jak se zablokovat z webových stránek

Chcete-li tato slova přestat považovat za chyby, přidejte je do svých slov Uživatelské nastavení .

  1. Klikněte pravým tlačítkem na slovo, které má kontrola pravopisu ignorovat.
  2. Vznášet se nad Pravopis a vyberte Přidejte slova do uživatelských nastavení . ​​​​​​​Tento článek jako soubor markdown otevřete ve VSCode s výchozím náhledem.

Od této chvíle již kontrola pravopisu nebude identifikovat tato slova jako nesprávná:

​​​​​​​Nabídka VSCode Settings > Extensions > Markdown > Markdown: Styles.

Nainstalujte Copy Markdown jako rozšíření HTML

Dále nainstalujte rozšíření Kopírovat Markdown jako HTML, abyste mohli kopírovat a vkládat formátovaný Markdown.

Stažení: Zkopírujte Markdown jako HTML Rozšíření VSCode (zdarma)

  1. Postupujte podle kroků 1 až 6 z výše uvedených částí.
  2. Vyber jerriepelser.copy-markdown-as-html-1.1.0.vsix soubor, který jste právě stáhli.

Nyní byste měli být schopni zkopírovat Markdown z VSCode a vložit jej do CMS jako čisté HTML. Chcete-li to otestovat:

  1. Vyberte nějaký text Markdown.
  2. Otevři Paleta příkazů v Pohled menu nebo stisknutím CTRL+Shift+P .
  3. Vybrat Markdown: Kopírovat jako HTML : Tento článek jako soubor markdown otevřete ve VSCode s prohlížečem přizpůsobeným tak, aby vypadal jako MUO.
  4. Vložte zkopírovaný Markdown do nového souboru HTML.

Měli byste vidět, že zkopírovaný Markdown byl správně vložen jako HTML:

Uvítací obrazovka VSCode ve světlém motivu.

Přizpůsobení podokna náhledu

Ve výchozím nastavení bude mít podokno náhledu stejný styl jako aktuální motiv VSCode.

Označení tohoto článku se otevírá ve VSCode pomocí motivu Office od huacat.

Možná však budete chtít, aby náhledy přesněji odrážely konečný cíl vašeho obsahu. Podokno náhledu si můžete přizpůsobit tak, aby váš Markdown vypadal, jako by byl již na webu, na kterém publikujete.

Můžete použít jakoukoli webovou stránku, kterou chcete; následující styly byly převzaty z MUO. Prostě k vyhledání písem použijte nástroj inspect element vašeho prohlížeče a vybrat barvy z libovolného webu .

  1. Vytvořte nový soubor a pojmenujte jej jako ' CustomStyles.css '
  2. Do souboru vložte následující ukázkový 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 soubor.
  4. Klikněte na ikona ozubeného kola v levém dolním rohu rozhraní.
  5. Klikněte na Nastavení .
  6. Klikněte na Rozšíření a pak Snížení .
  7. Přejděte dolů na Markdown: Styly a klikněte Přidat položku .
  8. Zadejte svou cestu CustomStyles.css soubor, například: 
    C:\Users\Adam\CustomStyles.css
    Označení tohoto článku se otevírá ve VSCode pomocí tématu Material od Equinusocio.
  9. Klikněte OK .

Jakmile je uděláte, měli byste skončit s panelem náhledu, který vypadá hodně jako tento článek.

Tyto hodnoty jsem opět získal pomocí nástroje Inspect Element mého prohlížeče na MUO, ale budete chtít najít hodnoty pro svůj vlastní cílový web.

Témata editoru

Výchozí motiv VSCode je k dispozici ve tmě i ve světle, s vysoce kontrastními verzemi každého z nich. Ale jako každý dobrý editor kódu existují k dispozici spousta skvělých motivů třetích stran .

Pokud dáváte přednost vzhledu textového procesoru před vzhledem editoru kódu, doporučuji téma Office od huacat:

Pokud dáváte přednost editoru kódu, na trhu s rozšířeními jsou k dispozici běžná témata jako Dracula, Gruvbox, Material (viz snímek obrazovky níže) a Nord.

Chcete-li nainstalovat nový motiv:

  1. Klikněte na ikona ozubeného kola v levém dolním rohu rozhraní.
  2. Klikněte na Rozšíření .
  3. Vyhledejte některý z výše uvedených motivů nebo jednoduše filtrujte kategorii témata a procházet, co je k dispozici.

Je VSCode konečným editorem Markdown?

Je tedy VSCode konečným editorem Markdown pro webový obsah? Out-of-the-box, pravděpodobně ne. Ale je tak rozšiřitelný, jak jen může být.

Počítadla slov, kontrola pravopisu, Kopírování Markdown jako HTML, náhled přizpůsobení a motivy jsou jen na poškrábání. Pro VSCode je k dispozici ekosystém plný rozšíření a můžete si jej přizpůsobit.