Hvis du skriver for nettet, kan det være lurt å se nærmere på Markdown. Det er mange Markdown-apper som henvender seg til nettskribenter. Men gratiskoderedigerere som Microsofts Visual Studio Code (VSCode) kan være enda kraftigere.

VSCode forstår Markdown og har innebygde verktøy for forhåndsvisning i HTML. Du kan imidlertid legge til tekstbehandlerfunksjonalitet som ordtelling og stavekontroll. Det kan også være lurt å aktivere nettstedspesifikke tilpasninger for forhåndsviseren.

Til slutt er muligheten til å kopiere Markdown som HTML slik at du kan lime den inn i et innholdsstyringssystem (CMS) et must.

Last ned og installer VSCode

For å begynne, last ned enten VSCode eller open source-alternativet VSCodium. Versjoner av hver er tilgjengelige for alle større stasjonære operativsystemer.

Når du har lastet ned og installert VSCode, kjør programmet for å begynne.

Installer utvidelse av ordtelling

Start med å legge til en ordteller. Det er mange utvidelser tilgjengelig som håndterer dette. Den som best skiller mellom faktiske ord og kode eller filnavn er Microsofts egen Word Counter-utvidelse.

instagram viewer

Nedlasting:Ordtelling VSCode-utvidelse (gratis)

  1. Klikk på Last ned utvidelse under Ressurser i nedre høyre rute.
  2. Når du er lastet ned, bytt til VSCode.
  3. Klikk på tannhjulikon i nedre venstre hjørne av grensesnittet.
  4. Klikk på Utvidelser.
  5. Klikk på ellipsen (...) nær toppen av utvidelsesruten.
  6. Klikk Installer fra VSIX.
  7. Velg ms-vscode.wordcount-*.vsix filen du nettopp lastet ned.

De Ordtelling utvidelsen skal nå være installert. Test den ved å åpne en ny Markdown-fil og skrive. Du skal nå se en ordteller nederst til venstre i grensesnittet:

Installer stavekontrollutvidelsen

Du vil også legge til stavekontrollfunksjonalitet. Som med ordtellere, er det mange utvidelser som håndterer stavekontroll. Den mest populære er Stavekontroll for kode av Street Side Software ettersom den er tilgjengelig på mange språk.

Nedlasting:Stavekontroll for kode VSCode-utvidelse (gratis)

  1. Følg trinn 1 til 6 fra avsnittet ovenfor.
  2. Velg streetsidesoftware.code-spell-checker-*.vsix filen du nettopp lastet ned.

De Stavekontroll for kode utvidelsen skal nå være installert. Test den ved å åpne en ny Markdown-fil og skrive feilstavede ord.

Du bør se en blå krøllete linje under disse ordene sammen med en telling av feil nederst til høyre i grensesnittet:

Tilpass Error Squiggle

Det største problemet med denne stavekontroll-utvidelsen er den svake blå fargen som brukes for krøllet som identifiserer feil. Det har en tendens til å blande seg inn i bakgrunnen til mørke temaer og gjenbrukes til andre Markdown-elementer.

Du kan prøve å endre den til en fet rød farge som du forventer å se i en tekstbehandler:

  1. Klikk på tannhjulikon i nedre venstre hjørne av grensesnittet.
  2. Klikk på Innstillinger.
  3. Klikk på arbeidsbenk, deretter Utseende.
  4. Rull ned til Fargetilpasning:
  5. Klikk Rediger i settings.json.
  6. Lim inn følgende kode i redigeringsprogrammet som åpnes i en ny fane:
    "editorInfo.foreground": "#ff0000"
  7. Lukk og lagre filen.

Nå hvis du staver et ord feil, vil VSCode dekorere det med en knallrød krusing:

Ignorerer falske positive

Stavekontrollen gjenkjenner kanskje ikke visse bransjespesifikke termer eller egennavn som firmanavn. I skjermbildet ovenfor, for eksempel, fremhever VSCode forkortelsen "distro" som en feilstaving.

For å slutte å se disse ordene som feil, bør du legge dem til Brukerinstillinger.

  1. Høyreklikk på ordet du vil at stavekontrollen skal ignorere.
  2. Sveve over Staving og velg Legg til ord i brukerinnstillinger.

Fra nå av vil stavekontrollen ikke lenger identifisere disse ordene som feil:

Installer Copy Markdown som HTML-utvidelse

Installer deretter Copy Markdown as HTML-utvidelsen slik at du kan kopiere og lime inn formatert Markdown.

Nedlasting:Kopier Markdown som HTML VSCode-utvidelse (gratis)

  1. Følg trinn 1 til 6 fra delene ovenfor.
  2. Velg jerriepelser.copy-markdown-as-html-1.1.0.vsix filen du nettopp lastet ned.

Nå skal du kunne kopiere Markdown fra VSCode og lime den inn i et CMS som ren HTML. For å teste dette:

  1. Velg litt Markdown-tekst.
  2. Åpne Kommandopalett i Utsikt menyen, eller ved å trykke CTRL+Shift+P.
  3. Velge Markdown: Kopier som HTML:
  4. Lim inn den kopierte Markdown i en ny HTML-fil.

Du bør se at den kopierte Markdown ble riktig limt inn som HTML:

Tilpasse forhåndsvisningsruten

Som standard vil forhåndsvisningsruten ha samme stil som gjeldende VSCode-tema.

Det kan imidlertid hende du vil at forhåndsvisninger skal gjenspeile innholdets endelige destinasjon nærmere. Du kan tilpasse forhåndsvisningsruten for å få Markdown til å se ut som om den allerede er på nettstedet du publiserer til.

Du kan bruke hvilken som helst nettside du vil; følgende stiler ble hentet fra MUO. Bare bruk nettleserens inspeksjonselementverktøy for å finne fonter og velg farger fra hvilken som helst nettside.

  1. Opprett en ny fil og navngi den noe sånt som "CustomStyles.css"
  2. Lim inn følgende eksempel CSS-kode i filen:
    kropp {
    bakgrunnsfarge: #fff;
    farge: #2c2c2c;
    font-familie: Roboto;
    skriftstørrelse: 18px;
    font-vekt: 400;
    linjehøyde: 1.7em;
    maks-bredde: 750px;
    }

    h1 {
    skriftstørrelse: 38px;
    font-vekt: 800;
    }

    h2 {
    skriftstørrelse: 34px;
    font-vekt: 700;
    }

    h3 {
    skriftstørrelse: 24px;
    font-vekt: 700;
    }

    en {
    border-bottom: 2px solid #bf0d0b;
    farge: #bf0d0b;
    font-vekt: 700;
    }

    en:sveve {
    farge: #fff;
    bakgrunn: #bf0d0b;
    }

    sterk {
    font-weight: fet;
    }

  3. Lukk og lagre filen.
  4. Klikk på tannhjulikon i nedre venstre hjørne av grensesnittet.
  5. Klikk på Innstillinger.
  6. Klikk på Utvidelser og så Markdown.
  7. Rull ned til Markdown: Stiler og klikk Legg til element.
  8. Skriv inn banen til din CustomStyles.css fil, for eksempel:
    C:\Brukere\Adam\Egendefinerte stiler.css
  9. Klikk OK.

Når du har laget disse, bør du ende opp med en forhåndsvisningsrute som ligner mye på denne artikkelen.

Igjen, jeg fikk disse verdiene ved å bruke nettleserens Inspect Element-verktøy på MUO, men du vil finne verdiene for ditt eget destinasjonsnettsted.

Redaktør-temaer

Standard VSCode-temaet kommer i både mørkt og lyst, med høykontrastversjoner av hvert. Men som en hvilken som helst god kodeeditor, finnes det massevis av flotte tredjepartstemaer tilgjengelig.

Hvis du foretrekker utseendet til en tekstbehandler fremfor en koderedigerer, anbefaler jeg Office-temaet av huacat:

Hvis du foretrekker en koderedigerer, er vanlige temaer som Dracula, Gruvbox, Material (se skjermbilde nedenfor) og Nord alle tilgjengelige fra utvidelsesmarkedet.

Slik installerer du et nytt tema:

  1. Klikk på tannhjulikon i nedre venstre hjørne av grensesnittet.
  2. Klikk på Utvidelser.
  3. Søk etter noen av de ovennevnte temaene eller filtrer kategorien til temaer og bla gjennom det som er tilgjengelig.

Er VSCode den ultimate Markdown Editor?

Så, er VSCode den ultimate Markdown-editoren for nettinnhold? Ut av esken, sannsynligvis ikke. Men det er omtrent så utvidbart som noe kan være.

Ordtellere, stavekontroller, Kopier Markdown som HTML, forhåndsvisningstilpasninger og temaer bare skraper i overflaten. Det er et økosystem fullt av utvidelser tilgjengelig for VSCode, og du står fritt til å gjøre det til ditt eget.