Hur man förvandlar VSCode till Ultimate Markdown Editor

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.

MAKEUSE AV DAGENS VIDEO

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.

Ladda ner: Antal ord VSCode Extension (gratis)

Klicka på Ladda ner tillägg under Resurser i den nedre högra rutan.
När du har laddat ner, växla till VSCode.
Klicka på kugghjulsikonen i det nedre vänstra hörnet av gränssnittet.
Klicka på Tillägg .
Klicka på ellipsen ( ... ) nära toppen av tilläggsrutan.
Klick Installera från VSIX .
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:

Ett markdown-dokument öppet i VSCode med felstavningar som upptäcks av en mjuk blå snirklig underlinje.

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)

Följ steg 1 till 6 från avsnittet ovan.
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.

Nedre högra sidan av VSCode-statusfältet med en indikator som visar fyra stavfel.

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:

Filen VSCode settings.json öppnas med anpassad kod tillagd.

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:

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

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

Ett korrekt formaterat HTML-dokument öppet i VSCode.

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 .

Högerklicka på ordet du vill att stavningskontrollen ska ignorera.
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:

menyn VSCode Settings > Extensions > Markdown > Markdown: Styles.

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.

hur man får fler filter på snapchat

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

Följ steg 1 till 6 från avsnitten ovan.
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:

Välj lite Markdown-text.
Öppna Kommandopalett i Se menyn eller genom att trycka på CTRL+Skift+P .
Välja Markdown: Kopiera som HTML :
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.

Nedskrivningen av den här artikeln öppnas i VSCode med Office-temat av huacat.

Däremot kanske du vill att förhandsvisningar ska återspegla ditt innehålls slutliga destination. 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 typsnitt och välj färger från vilken webbplats som helst .

Skapa en ny fil och namnge den något i stil med ' CustomStyles.css '

Klistra in följande exempel CSS-kod i filen:

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; 
}

och spara filen.
Klicka på kugghjulsikonen i det nedre vänstra hörnet av gränssnittet.
Klicka på inställningar .
Klicka på Tillägg och då Prissänkning .
Scrolla ner till Markdown: Stilar och klicka Lägg till vara .
Ange din väg CustomStyles.css fil, till exempel:
```
C:\Users\Adam\CustomStyles.css
```
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:

Klicka på kugghjulsikonen i det nedre vänstra hörnet av gränssnittet.
Klicka på Tillägg .
Sök efter något av de ovan nämnda teman eller filtrera helt enkelt kategorin till teman och bläddra bland 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.