Om du skriver för webben kanske du vill titta på Markdown. Det finns gott om Markdown-appar som vänder sig till webbskribenter. Men gratiskodredigerare som Microsofts Visual Studio Code (VSCode) kan vara ännu kraftfullare.

VSCode förstår Markdown och har inbyggda verktyg för att förhandsgranska det i HTML. Du kan dock lägga till ordbehandlingsfunktioner som ordräkning och en stavningskontroll. Du kanske också vill aktivera webbplatsspecifika anpassningar för förhandsgranskaren.

Slutligen är möjligheten att kopiera Markdown som HTML så att du rent kan klistra in den i ett Content Management System (CMS) ett måste.

Ladda ner och installera VSCode

För att börja, ladda ner antingen VSCode eller dess open source alternativ VSCodium. Versioner av varje är tillgängliga för alla större stationära operativsystem.

När du väl har gjort det nedladdade och installerade VSCode, kör programmet för att börja.

Installera Word Count Extension

Börja med att lägga till en ordräknare. Det finns många tillägg tillgängliga som hanterar detta. Den som bäst skiljer mellan verkliga ord och kod eller filnamn är Microsofts egna Word Counter-tillägg.

instagram viewer

Ladda ner:Antal ord VSCode Extension (gratis)

  1. Klicka på Ladda ner tillägg under Resurser i den nedre högra rutan.
  2. När du har laddat ner, växla till VSCode.
  3. Klicka på kugghjulsikonen i det nedre vänstra hörnet av gränssnittet.
  4. Klicka på Tillägg.
  5. Klicka på ellipsen (...) nära toppen av tilläggsrutan.
  6. Klick Installera från VSIX.
  7. Välj den ms-vscode.wordcount-*.vsix fil du just laddade ner.

De Antal ord tillägget ska nu installeras. Testa det genom att öppna en ny Markdown-fil och skriva. Du bör nu se en ordräknare längst ned till vänster i gränssnittet:

Installera stavningskontrolltillägget

Du vill också lägga till funktionalitet för stavningskontroll. Precis som med ordräknare finns det många tillägg som hanterar stavningskontroll. Den mest populära är Kodstavningskontroll av Street Side Software eftersom den är tillgänglig på många språk.

Ladda ner:Kodstavningskontroll VSCode Extension (gratis)

  1. Följ steg 1 till 6 från avsnittet ovan.
  2. Välj den streetsidesoftware.code-spell-checker-*.vsix fil du just laddade ner.

De Kodstavningskontroll tillägget ska nu installeras. Testa det genom att öppna en ny Markdown-fil och skriva felstavade ord.

Du bör se en blå snirklig linje under dessa ord tillsammans med ett antal fel i den nedre högra sidan av gränssnittet:

Anpassa Error Squiggle

Det största problemet med denna stavningskontrollförlängning är den svaga blå färgen som används för squiggle som identifierar fel. Det tenderar att smälta in i bakgrunden av mörka teman och återanvänds för andra Markdown-element.

Du kan prova att ändra den till en djärv röd färg som du förväntar dig att se i en ordbehandlare:

  1. Klicka på kugghjulsikonen i det nedre vänstra hörnet av gränssnittet.
  2. Klicka på inställningar.
  3. Klicka på Arbetsbänk, då Utseende.
  4. Scrolla ner till Färganpassning:
  5. Klick Redigera i settings.json.
  6. Klistra in följande kod i redigeraren som öppnas på en ny flik:
    "editorInfo.foreground": "#ff0000"
  7. Stäng och spara filen.

Om du nu stavar fel på ett ord, kommer VSCode att dekorera det med en klar röd squiggle:

Ignorera falska positiva

Stavningskontrollen kanske inte känner igen vissa branschspecifika termer eller egennamn som företagsnamn. I skärmdumpen ovan, till exempel, framhäver VSCode förkortningen "distro" som en felstavning.

För att sluta se dessa ord som fel, vill du lägga till dem i din Användarinställningar.

  1. Högerklicka på ordet du vill att stavningskontrollen ska ignorera.
  2. Sväva över Stavning och välj Lägg till ord i användarinställningar.

Från och med nu kommer stavningskontrollen inte längre att identifiera dessa ord som felaktiga:

Installera Copy Markdown som HTML-tillägg

Installera sedan tillägget Kopiera Markdown som HTML så att du kan kopiera och klistra in formaterad Markdown.

Ladda ner:Kopiera Markdown som HTML VSCode Extension (gratis)

  1. Följ steg 1 till 6 från avsnitten ovan.
  2. Välj den jerriepelser.copy-markdown-as-html-1.1.0.vsix fil du just laddade ner.

Nu bör du kunna kopiera Markdown från VSCode och klistra in den i ett CMS som ren HTML. För att testa detta:

  1. Välj lite Markdown-text.
  2. Öppna Kommandopalett i Se menyn eller genom att trycka på CTRL+Skift+P.
  3. Välja Markdown: Kopiera som HTML:
  4. Klistra in den kopierade Markdown i en ny HTML-fil.

Du bör se att den kopierade Markdown var korrekt inklistrad som HTML:

Anpassa förhandsgranskningsfönstret

Som standard kommer förhandsgranskningsfönstret att ha samma stil som det aktuella VSCode-temat.

Däremot kanske du vill att förhandsgranskningar ska återspegla ditt innehålls slutmål. Du kan anpassa förhandsgranskningsrutan så att din Markdown ser ut som om den redan finns på webbplatsen du publicerar på.

Du kan använda vilken webbplats du vill; följande stilar togs från MUO. Bara använd din webbläsares verktyg för inspektera element för att hitta teckensnitt och välj färger från vilken webbplats som helst.

  1. Skapa en ny fil och namnge den något i stil med "CustomStyles.css"
  2. Klistra in följande exempel CSS-kod i filen:
    kropp {
     bakgrundsfärg: #fff;
     Färg: #2c2c2c;
     font-family: Roboto;
     teckenstorlek: 18px;
     teckensnittsvikt: 400;
    radavstånd: 1.7em;
     max-bredd: 750px;
    }
    h1 {
     teckenstorlek: 38px;
     teckensnittsvikt: 800;
    }
    

    h2 {
     teckenstorlek: 34px;
     teckensnittsvikt: 700;
    }
    

    h3 {
     teckenstorlek: 24px;
     teckensnittsvikt: 700;
    }
    

    en {
     border-bottom: 2px fast #bf0d0b;
     Färg: #bf0d0b;
     teckensnittsvikt: 700;
    }
    

    a:sväva {
     Färg: #fff;
     bakgrund: #bf0d0b;
    }
    stark {
     font-weight: fet;
    }
  3. Stäng och spara filen.
  4. Klicka på kugghjulsikonen i det nedre vänstra hörnet av gränssnittet.
  5. Klicka på inställningar.
  6. Klicka på Tillägg och då Prissänkning.
  7. Scrolla ner till Markdown: Stilar och klicka Lägg till vara.
  8. Ange din väg CustomStyles.css fil, till exempel:
    C:\Användare\Adam\Anpassade stilar.css
  9. Klick OK.

När du har gjort dessa bör du sluta med en förhandsgranskningsruta som ser mycket ut som den här artikeln.

Återigen, jag fick dessa värden genom att använda min webbläsares Inspect Element-verktyg på MUO, men du vill hitta värdena för din egen destinationswebbplats.

Redaktörsteman

Standard VSCode-temat kommer i både mörkt och ljust, med högkontrastversioner av varje. Men som alla bra kodredigerare finns det massor av fantastiska tredjepartsteman tillgängliga.

Om du föredrar utseendet på en ordbehandlare framför en kodredigerare rekommenderar jag Office-temat av huacat:

Om du föredrar en kodredigerare är vanliga teman som Dracula, Gruvbox, Material (se skärmdump nedan) och Nord alla tillgängliga från tilläggsmarknaden.

Så här installerar du ett nytt tema:

  1. Klicka på kugghjulsikonen i det nedre vänstra hörnet av gränssnittet.
  2. Klicka på Tillägg.
  3. Sök efter något av de ovan nämnda teman eller filtrera helt enkelt kategorin till teman och bläddra vad som finns tillgängligt.

Är VSCode den ultimata Markdown Editor?

Så, är VSCode den ultimata Markdown-redigeraren för webbinnehåll? Out-of-the-box, förmodligen inte. Men det är ungefär så utdragbart som något kan vara.

Ordräknare, stavningskontroller, Kopiera Markdown som HTML, förhandsgranskningsanpassningar och teman skrapar bara på ytan. Det finns ett ekosystem fullt av tillägg tillgängliga för VSCode, och du är fri att göra den till din egen.