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 Visual Studio Code (VSCode) od Microsoftu, 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 editoru, jako je počet slov a kontrola pravopisu. Můžete také chtít povolit přizpůsobení specifická pro web pro náhled.

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.

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.

instagram viewer

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.
  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í:

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.

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

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:
  5. Klikněte Upravte v souboru settings.json.
  6. Vložte následující kód do editoru, který se otevře na nové kartě:
    "editorInfo.popředí": "#ff0000"
  7. Zavřete a uložte soubor.

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

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.

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í.

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

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:
  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:

Přizpůsobení podokna náhledu

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

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:
    tělo {
     barva pozadí: #fff;
     barva: #2c2c2c;
     rodina písem: Roboto;
     velikost písma: 18px;
     váha písma: 400;
    výška čáry: 10,7 em;
     max-width: 750px;
    }
    h1 {
     velikost písma: 38px;
     váha písma: 800;
    }
    

    h2 {
     velikost písma: 34px;
     váha písma: 700;
    }
    

    h3 {
     velikost písma: 24px;
     váha písma: 700;
    }
    

    a {
     okraj-dole: 2px pevné #bf0d0b;
     barva: #bf0d0b;
     váha písma: 700;
    }
    

    A:vznášet se {
     barva: #fff;
     Pozadí: #bf0d0b;
    }
    silný {
     váha písma: tučné;
    }
  3. Zavřete 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:\Uživatelé\Adame\CustomStyles.css
  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, běžná témata jako Dracula, Gruvbox, Material (viz snímek obrazovky níže) a Nord jsou k dispozici na trhu s rozšířeními.

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.