Sådan gør du VSCode til den ultimative Markdown Editor

Hvis du skriver til nettet, vil du måske kigge nærmere på Markdown. Der er masser af Markdown-apps, der henvender sig til webskribenter. Men gratis kodeeditorer som Microsofts Visual Studio Code (VSCode) kan være endnu mere kraftfulde.

VSCode forstår Markdown og har indbyggede værktøjer til at forhåndsvise det i HTML. Du kan dog tilføje tekstbehandlingsfunktionalitet som ordoptælling og en stavekontrol. Du vil måske også aktivere webstedsspecifikke tilpasninger til forhåndsvisningen.

MAKEUSE AF DAGENS VIDEO

Endelig er evnen til at kopiere Markdown som HTML, så du rent kan indsætte den i et Content Management System (CMS) et must.

hvordan man sænker skærmens lysstyrke i windows 10

Download og installer VSCode

For at begynde skal du downloade enten VSCode eller dets open source-alternativ VSCodium. Versioner af hver er tilgængelige for alle større desktop-operativsystemer.

Når du har downloadet og installeret VSCode , skal du køre programmet for at begynde.

Installer Word Count Extension

Start med at tilføje en ordtæller. Der er mange udvidelser tilgængelige, der håndterer dette. Den, der bedst skelner mellem faktiske ord og kode eller filnavne, er Microsofts egen Word Counter-udvidelse.

Hent: Ordtælling VSCode-udvidelse (gratis)

Klik på Download udvidelse under Ressourcer i nederste højre rude.
Når den er downloadet, skal du skifte til VSCode.
Klik på gear ikon i nederste venstre hjørne af grænsefladen.
Klik på Udvidelser .
Klik på ellipsen ( ... ) nær toppen af udvidelsesruden.
Klik Installer fra VSIX .
Vælg ms-vscode.wordcount-*.vsix fil, du lige har downloadet.

Det Ordtælling udvidelsen skal nu være installeret. Test det ved at åbne en ny Markdown-fil og skrive. Du skulle nu se en ordtæller i nederste venstre side af grænsefladen:

Et markdown-dokument åbent i VSCode med stavefejl opdaget af en blød blå snoet understregning.

Installer udvidelsen til stavekontrol

Du vil også tilføje stavekontrolfunktionalitet. Som med ordtællere er der mange udvidelser, der håndterer stavekontrol. Den mest populære er Kode stavekontrol af Street Side Software, da den er tilgængelig på mange sprog.

Hent: Kode stavekontrol VSCode-udvidelse (gratis)

Følg trin 1 til 6 fra afsnittet ovenfor.
Vælg streetsidesoftware.code-spell-checker-*.vsix fil, du lige har downloadet.

Det Kode stavekontrol udvidelsen skal nu være installeret. Test det ved at åbne en ny Markdown-fil og skrive forkert stavede ord.

Nedre højre side af VSCode-statuslinjen med en indikator, der viser fire stavefejl.

Du bør se en blå snoet linje under disse ord sammen med et antal fejl i nederste højre side af grænsefladen:

Filen VSCode settings.json åbnes med tilpasset kode tilføjet.

Tilpas fejl-squiggle

Det største problem med denne stavekontroludvidelse er den svage blå farve, der bruges til krumspringet, der identificerer fejl. Det har en tendens til at blande sig i baggrunden af mørke temaer og genbruges til andre Markdown-elementer.

Du kan prøve at ændre den til en fed rød farve, som du ville forvente at se i et tekstbehandlingsprogram:

Klik på gear ikon i nederste venstre hjørne af grænsefladen.
Klik på Indstillinger .
Klik på Arbejdsbord , derefter Udseende .
Rul ned til Farvetilpasning :
Klik Rediger i settings.json .
Indsæt følgende kode i editoren, der åbner i en ny fane:
```
"editorInfo.foreground": "#ff0000"
```
og gem filen.

Hvis du nu staver et ord forkert, vil VSCode dekorere det med en lys rød krusedulle:

Et korrekt formateret HTML-dokument åbent i VSCode.

Ignorerer falske positive

Stavekontrollen genkender muligvis ikke visse branchespecifikke termer eller egennavne som firmanavne. I skærmbilledet ovenfor fremhæver VSCode for eksempel forkortelsen 'distro' som en stavefejl.

For at stoppe med at se disse ord som fejl, skal du tilføje dem til din Brugerindstillinger .

Højreklik på det ord, du vil have stavekontrollen til at ignorere.
Svæve over Stavning og vælg Føj ord til brugerindstillinger .

Fra nu af vil stavekontrollen ikke længere identificere disse ord som forkerte:

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

Installer Copy Markdown som HTML-udvidelse

Installer derefter udvidelsen Kopier Markdown som HTML, så du kan kopiere og indsætte formateret Markdown.

Hent: Kopier Markdown som HTML VSCode-udvidelse (gratis)

Følg trin 1 til 6 fra ovenstående afsnit.
Vælg jerriepelser.copy-markdown-as-html-1.1.0.vsix fil, du lige har downloadet.

Nu skulle du være i stand til at kopiere Markdown fra VSCode og indsætte det i et CMS som ren HTML. For at teste dette:

Vælg noget Markdown-tekst.
Åbn Kommandopalet i Udsigt menu, eller ved at trykke på CTRL+Shift+P .
Vælge Markdown: Kopiér som HTML :
Indsæt den kopierede Markdown i en ny HTML-fil.

Du skal se, at den kopierede Markdown var korrekt indsat som HTML:

Tilpasning af forhåndsvisningsruden

Som standard vil forhåndsvisningsruden have samme stil som det aktuelle VSCode-tema.

Markdown af denne artikel åbner i VSCode ved hjælp af Office-temaet af huacat.

Men du vil måske have forhåndsvisninger, der i højere grad afspejler dit indholds ultimative destination. Du kan tilpasse forhåndsvisningsruden for at få din Markdown til at se ud, som om den allerede er på det websted, du udgiver til.

Du kan bruge et hvilket som helst websted, du ønsker; følgende stilarter blev taget fra MUO. Lige brug din browsers inspiceringselementværktøj til at finde skrifttyper og vælg farver fra enhver hjemmeside .

hvordan man rydder ram windows 10

Opret en ny fil og navngiv den noget i stil med ' CustomStyles.css '

Indsæt følgende eksempel CSS-kode 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; 
}

og gem filen.
Klik på gear ikon i nederste venstre hjørne af grænsefladen.
Klik på Indstillinger .
Klik på Udvidelser og så Markdown .
Rul ned til Markdown: Stilarter og klik Tilføj vare .
Indtast stien til din CustomStyles.css fil, for eksempel:
```
C:\Users\Adam\CustomStyles.css
```
Klik Okay .

Når du har lavet disse, bør du ende med en forhåndsvisningsrude, der ligner denne artikel meget.

Igen fik jeg disse værdier ved at bruge min browsers Inspect Element-værktøj på MUO, men du vil gerne finde værdierne for dit eget destinationswebsted.

Redaktør temaer

Standard VSCode-temaet kommer i både mørkt og lyst, med højkontrastversioner af hver. Men som enhver god kodeeditor er der et væld af gode tredjepartstemaer tilgængelige .

Hvis du foretrækker udseendet af en tekstbehandler frem for en kodeeditor, anbefaler jeg Office-temaet fra huacat:

Hvis du foretrækker en kodeeditor, er almindelige temaer som Dracula, Gruvbox, Materiale (se skærmbillede nedenfor) og Nord alle tilgængelige fra udvidelsesmarkedet.

Sådan installerer du et nyt tema:

Klik på gear ikon i nederste venstre hjørne af grænsefladen.
Klik på Udvidelser .
Søg efter et af de ovennævnte temaer eller filtrer blot kategorien til temaer og gennemse hvad der er tilgængeligt.

Er VSCode den ultimative Markdown Editor?

Så er VSCode den ultimative Markdown-editor til webindhold? Out-of-the-box, sandsynligvis ikke. Men det er omtrent så udvideligt, som noget kunne være.

Ordtællere, stavekontrol, Kopier Markdown som HTML, forhåndsvisning af tilpasninger og temaer ridser bare overfladen. Der er et økosystem fuld af udvidelser til rådighed for VSCode, og du er fri til at gøre det til dit eget.