Ako pišete za web, možda biste trebali pogledati Markdown. Postoji mnogo Markdown aplikacija koje služe web piscima. Ali besplatni uređivači koda poput Microsoftovog Visual Studio Code (VSCode) mogu biti još moćniji.

VSCode razumije Markdown i ima ugrađene alate za pretpregled u HTML-u. Međutim, možete dodati funkcionalnost programa za obradu teksta kao što je brojanje riječi i provjera pravopisa. Također biste mogli omogućiti prilagodbe specifične za web-mjesto za preglednik.

Konačno, mogućnost kopiranja Markdowna kao HTML-a kako biste ga mogli čisto zalijepiti u sustav upravljanja sadržajem (CMS) je obavezna.

Preuzmite i instalirajte VSCode

Za početak preuzmite VSCode ili njegovu alternativu otvorenog koda VSCodium. Verzije svake dostupne su za sve glavne operativne sustave za stolna računala.

Nakon što ste skinuo i instalirao VSCode, pokrenite aplikaciju za početak.

Instalirajte proširenje za brojanje riječi

Započnite dodavanjem brojača riječi. Postoji mnogo dostupnih proširenja koja to rješavaju. Ono što najbolje razlikuje stvarne riječi od koda ili naziva datoteka jest Microsoftovo vlastito proširenje Word Counter.

instagram viewer

Preuzimanje datoteka:Brojanje riječi VSCode proširenje (besplatno)

  1. Kliknite na Preuzmi proširenje pod, ispod Resursi u donjem desnom oknu.
  2. Nakon preuzimanja prebacite se na VSCode.
  3. Klikni na ikona zupčanika u donjem lijevom kutu sučelja.
  4. Kliknite na Ekstenzije.
  5. Kliknite na elipsu (...) pri vrhu okna Proširenja.
  6. Klik Instalirajte iz VSIX-a.
  7. Odaberi ms-vscode.wordcount-*.vsix datoteku koju ste upravo preuzeli.

The Brojanje riječi ekstenzija bi sada trebala biti instalirana. Testirajte ga otvaranjem nove Markdown datoteke i upisivanjem. Sada biste trebali vidjeti brojač riječi u donjem lijevom dijelu sučelja:

Instalirajte proširenje za provjeru pravopisa

Također biste željeli dodati funkciju provjere pravopisa. Kao i kod brojača riječi, postoje mnoga proširenja koja upravljaju provjerom pravopisa. Najpopularniji je Provjera pravopisa koda od strane Street Side Softwarea jer je dostupan na mnogim jezicima.

Preuzimanje datoteka:Provjera pravopisa koda VSCode proširenje (besplatno)

  1. Slijedite korake od 1 do 6 iz gornjeg odjeljka.
  2. Odaberi streetsidesoftware.code-spell-checker-*.vsix datoteku koju ste upravo preuzeli.

The Provjera pravopisa koda ekstenzija bi sada trebala biti instalirana. Testirajte ga otvaranjem nove Markdown datoteke i upisivanjem pogrešno napisanih riječi.

Trebali biste vidjeti plavu vijugavu liniju ispod tih riječi zajedno s brojem pogrešaka u donjem desnom dijelu sučelja:

Prilagodite vijugavu pogrešku

Najveći problem s ovim proširenjem Provjera pravopisa je slaba plava boja koja se koristi za vijugu koja identificira pogreške. Ima tendenciju da se uklopi u pozadinu tamnih tema i ponovno se koristi za druge Markdown elemente.

Možete je pokušati promijeniti u podebljanu crvenu boju kakvu biste očekivali u programu za obradu teksta:

  1. Klikni na ikona zupčanika u donjem lijevom kutu sučelja.
  2. Kliknite na postavke.
  3. Kliknite na Radni stol, onda Izgled.
  4. Pomaknite se prema dolje do Prilagodba boja:
  5. Klik Uredite u settings.json.
  6. Zalijepite sljedeći kod u uređivač koji se otvara u novoj kartici:
    "editorInfo.foreground": "#ff0000"
  7. Zatvorite i spremite datoteku.

Sada, ako pogrešno napišete riječ, VSCode će je ukrasiti jarko crvenom vijugom:

Ignoriranje lažno pozitivnih rezultata

Provjera pravopisa možda neće prepoznati određene pojmove specifične za industriju ili vlastite imenice poput naziva tvrtki. Na gornjoj snimci zaslona, ​​na primjer, VSCode ističe kraticu "distro" kao pravopisnu pogrešku.

Da ove riječi više ne vidite kao pogreške, dodajte ih u svoj Korisničke postavke.

  1. Kliknite desnom tipkom miša na riječ koju želite da alat za provjeru pravopisa zanemari.
  2. Lebdjeti iznad Pravopis i odaberite Dodajte riječi u korisničke postavke.

Od sada, provjera pravopisa više neće identificirati ove riječi kao netočne:

Instalirajte Copy Markdown kao HTML ekstenziju

Zatim instalirajte proširenje Copy Markdown kao HTML kako biste mogli kopirati i zalijepiti formatirani Markdown.

Preuzimanje datoteka:Kopiraj Markdown kao HTML VSCode proširenje (besplatno)

  1. Slijedite korake od 1 do 6 iz gornjih odjeljaka.
  2. Odaberi jerriepelser.copy-markdown-as-html-1.1.0.vsix datoteku koju ste upravo preuzeli.

Sada biste trebali moći kopirati Markdown iz VSCodea i zalijepiti ga u CMS kao čisti HTML. Da biste ovo testirali:

  1. Odaberite Markdown tekst.
  2. Otvori Paleta naredbi u Pogled izborniku ili pritiskom na CTRL+Shift+P.
  3. Odaberite Markdown: Kopiraj kao HTML:
  4. Zalijepite kopirani Markdown u novu HTML datoteku.

Trebali biste vidjeti da je kopirani Markdown ispravno zalijepljen kao HTML:

Prilagodba okna za pretpregled

Prema zadanim postavkama, okno za pregled imat će isti stil kao trenutna VSCode tema.

Međutim, možda biste željeli da pregledi bolje odražavaju krajnje odredište vašeg sadržaja. Možete prilagoditi okno za pregled kako bi vaš Markdown izgledao kao da je već na web-mjestu na kojem objavljujete.

Možete koristiti bilo koje web mjesto koje želite; sljedeći stilovi preuzeti su iz MUO. Samo upotrijebite alat pregledavanja elemenata za pronalaženje fontova i odaberite boje s bilo koje web stranice.

  1. Napravite novu datoteku i nazovite je otprilike "CustomStyles.css"
  2. Zalijepite sljedeći primjer CSS koda u datoteku:
    tijelo {
     boja pozadine: #F F F;
     boja: #2c2c2c;
     obitelj-fontova: Roboto;
     veličina fonta: 18px;
     težina slova: 400;
    linija-visina: 1.7em;
     max-width: 750px;
    }
    h1 {
     veličina fonta: 38px;
     težina fonta: 800;
    }
    

    h2 {
     veličina fonta: 34px;
     težina fonta: 700;
    }
    

    h3 {
     veličina fonta: 24px;
     težina fonta: 700;
    }
    

    a {
     granica-dolje: 2px čvrsta #bf0d0b;
     boja: #bf0d0b;
     težina fonta: 700;
    }
    

    a:lebdjeti {
     boja: #F F F;
     pozadina: #bf0d0b;
    }
    jak {
     font-weight: bold;
    }
  3. Zatvorite i spremite datoteku.
  4. Klikni na ikona zupčanika u donjem lijevom kutu sučelja.
  5. Kliknite na postavke.
  6. Kliknite na Ekstenzije i onda Smanjenje.
  7. Pomaknite se prema dolje do Markdown: Stilovi i kliknite Dodaj Predmet.
  8. Uđi na put svoj CustomStyles.css datoteka, na primjer:
    C:\Korisnici\Adam\CustomStyles.css
  9. Klik u redu.

Nakon što ih napravite, trebali biste završiti s oknom za pretpregled koje izgleda dosta slično ovom članku.

Opet, dobio sam ove vrijednosti korištenjem alata preglednika Inspect Element na MUO, ali ćete željeti pronaći vrijednosti za vlastitu odredišnu web stranicu.

Uređivač tema

Zadana VSCode tema dolazi u tamnoj i svijetloj verziji, s visokokontrastnim verzijama svake. Ali kao i svaki dobar uređivač koda, postoje dostupna je tona sjajnih tema trećih strana.

Ako više volite izgled programa za obradu teksta u odnosu na uređivač koda, preporučujem huacat temu za Office:

Ako više volite uređivač koda, uobičajene teme kao što su Dracula, Gruvbox, Material (pogledajte snimak zaslona u nastavku) i Nord dostupne su na tržištu proširenja.

Da biste instalirali novu temu:

  1. Klikni na ikona zupčanika u donjem lijevom kutu sučelja.
  2. Kliknite na Ekstenzije.
  3. Potražite bilo koju od gore navedenih tema ili jednostavno filtrirajte kategoriju teme i pregledajte što je dostupno.

Je li VSCode ultimativni uređivač markdowna?

Dakle, je li VSCode ultimativni Markdown editor za web sadržaj? Izvan okvira, vjerojatno ne. Ali proširiv je koliko god išta može biti.

Brojači riječi, provjera pravopisa, Copy Markdown kao HTML, prilagodbe pregleda i teme samo zagrebu površinu. Postoji ekosustav pun proširenja dostupnih za VSCode, a vi ga slobodno možete napraviti svojim.