Kako VSCode pretvoriti u vrhunski uređivač markdowna

Kako VSCode pretvoriti u vrhunski uređivač markdowna

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.





MAKEUSEOF VIDEO DANA

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.



  Zadani VSCode zaslon dobrodošlice.

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.

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 .   ​​​​​​VSCode s proširenjem Microsoft Word Count koji otkriva broj riječi u oglednom dokumentu.
  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:

  ​​​​​​​Označeni dokument otvoren u VSCodeu s pravopisnim pogreškama otkrivenim mekom plavom vijugavom podcrtanom crtom.

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.

  ​​​​​​Donja desna strana VSCode statusne trake s indikatorom koji prikazuje četiri pravopisne pogreške.

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

  Datoteka VSCode settings.json otvorena je s dodanim prilagođenim kodom.

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.

mogu li koristiti androidove sa androidom

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 :   Označeni dokument otvoren u VSCodeu s flagrantnim pravopisnim pogreškama otkrivenim jakom crvenom vijugavom podcrtanom crtom.
  5. Klik Uredite u settings.json .
  6. Zalijepite sljedeći kod u uređivač koji se otvara u novoj kartici:
    "editorInfo.foreground": "#ff0000"
      Označeni dokument otvoren u VSCodeu s tri pravopisne pogreške.
  7. i spremite datoteku.

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

  Ispravno formatiran HTML dokument otvoren u VSCodeu.

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 .   ​​​​​​​Ovaj članak kao markdown datoteka otvorena u VSCodeu sa zadanim preglednikom.

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

  ​​​​​​​VSCode Settings > Extensions > Markdown > Markdown: izbornik Stilovi.

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 :   Ovaj članak kao markdown datoteka otvorena u VSCodeu s preglednikom prilagođenim da izgleda kao MUO.
  4. Zalijepite kopirani Markdown u novu HTML datoteku.

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

  VSCode ekran dobrodošlice u svijetloj temi.

Prilagodba okna za pretpregled

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

  Oznaka ovog članka otvorena je u VSCodeu koristeći huacat temu Office.

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 se već nalazi 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:
    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;
    }
  3. 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:\Users\Adam\CustomStyles.css
      Oznaka ovog članka otvorena je u VSCodeu koristeći temu Material by Equinusocio.
  9. Klik u redu .

Nakon što ih napravite, trebali biste završiti s oknom za pregled koje uvelike izgleda poput ovog članka.

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.