Če pišete za splet, boste morda želeli pogledati Markdown. Obstaja veliko aplikacij Markdown, ki skrbijo za spletne pisce. Toda brezplačni urejevalniki kode, kot je Microsoftov Visual Studio Code (VSCode), so lahko še močnejši.

VSCode razume Markdown in ima vgrajena orodja za predogled v HTML. Vendar pa lahko dodate funkcije urejevalnika besedil, kot sta štetje besed in črkovalnik. Morda boste želeli omogočiti tudi prilagoditve, specifične za spletno mesto, za predogled.

Nazadnje je nujna možnost kopiranja Markdown kot HTML, da ga lahko čisto prilepite v sistem za upravljanje vsebine (CMS).

Prenesite in namestite VSCode

Za začetek prenesite VSCode ali njegovo odprtokodno alternativo VSCodium. Različice vsakega so na voljo za vse večje namizne operacijske sisteme.

Ko ste enkrat prenesel in namestil VSCode, za začetek zaženite aplikacijo.

Namestite razširitev za štetje besed

Začnite z dodajanjem števca besed. Na voljo je veliko razširitev, ki to obravnavajo. Tista, ki najbolje razlikuje med dejanskimi besedami in kodo ali imeni datotek, je Microsoftova lastna razširitev Word Counter.

instagram viewer

Prenesi:Število besed Razširitev VSCode (brezplačno)

  1. Kliknite na Prenesite razširitev Spodaj Viri v spodnjem desnem podoknu.
  2. Po prenosu preklopite na VSCode.
  3. Kliknite na ikona zobnika v spodnjem levem kotu vmesnika.
  4. Kliknite na Razširitve.
  5. Kliknite elipso (...) blizu vrha podokna z razširitvami.
  6. Kliknite Namestite iz VSIX.
  7. Izberite ms-vscode.wordcount-*.vsix datoteko, ki ste jo pravkar prenesli.

The Število besed razširitev bi morala biti zdaj nameščena. Preizkusite ga tako, da odprete novo datoteko Markdown in vnesete. Zdaj bi morali videti števec besed na spodnji levi strani vmesnika:

Namestite razširitev za preverjanje črkovanja

Prav tako boste želeli dodati funkcijo preverjanja črkovanja. Tako kot pri števcih besed obstaja veliko razširitev za preverjanje črkovanja. Najbolj priljubljena je Preverjanje črkovanja kode Street Side Software, saj je na voljo v številnih jezikih.

Prenesi:Preverjanje črkovanja kode Razširitev VSCode (brezplačno)

  1. Sledite korakom od 1 do 6 iz zgornjega razdelka.
  2. Izberite streetsidesoftware.code-spell-checker-*.vsix datoteko, ki ste jo pravkar prenesli.

The Preverjanje črkovanja kode razširitev bi morala biti zdaj nameščena. Preizkusite ga tako, da odprete novo datoteko Markdown in vnesete napačno črkovane besede.

Pod temi besedami bi morali videti modro vijugasto črto skupaj s številom napak na spodnji desni strani vmesnika:

Prilagodite vijugasto napako

Največja težava pri tej razširitvi za preverjanje črkovanja je šibka modra barva, ki se uporablja za vijuganje, ki označuje napake. Ponavadi se zlije z ozadjem temnih tem in se ponovno uporabi za druge elemente Markdown.

Lahko jo poskusite spremeniti v krepko rdečo barvo, kot bi jo pričakovali v urejevalniku besedil:

  1. Kliknite na ikona zobnika v spodnjem levem kotu vmesnika.
  2. Kliknite na nastavitve.
  3. Kliknite na Delovna miza, potem Videz.
  4. Pomaknite se navzdol do Barvna prilagoditev:
  5. Kliknite Uredite v settings.json.
  6. Prilepite naslednjo kodo v urejevalnik, ki se odpre v novem zavihku:
    "editorInfo.foreground": "#ff0000"
  7. Zaprite in shranite datoteko.

Če besedo napačno črkujete, jo bo VSCode okrasil s svetlo rdečo vijugasto črko:

Ignoriranje lažnih pozitivnih rezultatov

Preverjevalnik črkovanja morda ne bo prepoznal določenih izrazov, specifičnih za panogo, ali lastnih imen, kot so imena podjetij. V zgornjem posnetku zaslona na primer VSCode poudarja kratico "distro" kot napačno črkovano.

Če želite te besede ne videti več kot napake, jih dodajte v svoj Uporabniške nastavitve.

  1. Z desno miškino tipko kliknite besedo, za katero želite, da črkovalnik prezre.
  2. Lebdite nad Črkovanje in izberite Dodajte besede uporabniškim nastavitvam.

Od zdaj naprej preverjanje črkovanja teh besed ne bo več prepoznalo kot nepravilnih:

Namestite Copy Markdown kot razširitev HTML

Nato namestite razširitev Copy Markdown kot HTML, da boste lahko kopirali in prilepili oblikovan Markdown.

Prenesi:Kopiraj Markdown kot HTML Razširitev VSCode (brezplačno)

  1. Sledite korakom od 1 do 6 iz zgornjih razdelkov.
  2. Izberite jerriepelser.copy-markdown-as-html-1.1.0.vsix datoteko, ki ste jo pravkar prenesli.

Zdaj bi morali imeti možnost kopirati Markdown iz VSCode in ga prilepiti v CMS kot čisti HTML. Če želite to preizkusiti:

  1. Izberite nekaj besedila Markdown.
  2. Odprite Paleta ukazov v Pogled meniju ali s pritiskom na CTRL+Shift+P.
  3. Izberite Markdown: Kopiraj kot HTML:
  4. Prilepite kopirano oznako Markdown v novo datoteko HTML.

Morali bi videti, da je bil kopirani Markdown pravilno prilepljen kot HTML:

Prilagajanje podokna za predogled

Privzeto bo imelo podokno za predogled enak slog kot trenutna tema VSCode.

Vendar pa boste morda želeli, da predogledi bolje odražajo končni cilj vaše vsebine. Podokno za predogled lahko prilagodite tako, da bo vaš Markdown videti, kot da je že na spletnem mestu, na katerem objavljate.

Uporabite lahko katero koli spletno stran, ki jo želite; naslednji slogi so bili vzeti iz MUO. Samo za iskanje pisav uporabite orodje brskalnika za pregledovanje elementov in izberite barve s katerega koli spletnega mesta.

  1. Ustvarite novo datoteko in jo poimenujte nekako tako kot "CustomStyles.css"
  2. V datoteko prilepite naslednji primer kode CSS:
    telo {
     Barva ozadja: #fff;
     barva: #2c2c2c;
     družina pisav: Roboto;
     velikost pisave: 18px;
     teža pisave: 400;
    višina vrstice: 1.7em;
     največja širina: 750 slikovnih pik;
    }
    h1 {
     velikost pisave: 38px;
     teža pisave: 800;
    }
    

    h2 {
     velikost pisave: 34px;
     teža pisave: 700;
    }
    

    h3 {
     velikost pisave: 24px;
     teža pisave: 700;
    }
    

    a {
     obroba-spodnja: 2px trdna #bf0d0b;
     barva: #bf0d0b;
     teža pisave: 700;
    }
    

    a:lebdi {
     barva: #fff;
     ozadje: #bf0d0b;
    }
    močan {
     teža pisave: krepko;
    }
  3. Zaprite in shranite datoteko.
  4. Kliknite na ikona zobnika v spodnjem levem kotu vmesnika.
  5. Kliknite na nastavitve.
  6. Kliknite na Razširitve in potem Markdown.
  7. Pomaknite se navzdol do Markdown: slogi in kliknite Dodaj predmet.
  8. Vstopite na svojo pot CustomStyles.css datoteka, na primer:
    C:\Uporabniki\Adam\CustomStyles.css
  9. Kliknite v redu.

Ko jih naredite, bi morali na koncu dobiti podokno za predogled, ki je zelo podobno temu članku.

Spet sem dobil te vrednosti z uporabo brskalnikovega orodja Inspect Element na MUO, vendar boste želeli poiskati vrednosti za svoje ciljno spletno mesto.

Urejevalnik tem

Privzeta tema VSCode je na voljo v temni in svetli različici z visokokontrastnimi različicami. Toda kot vsak dober urejevalnik kode obstajajo na voljo je ogromno odličnih tem tretjih oseb.

Če imate raje videz urejevalnika besedil kot urejevalnika kode, priporočam temo Office avtorja huacat:

Če imate raje urejevalnik kode, so običajne teme, kot so Dracula, Gruvbox, Material (glejte spodnji posnetek zaslona) in Nord, na voljo na tržnici razširitev.

Če želite namestiti novo temo:

  1. Kliknite na ikona zobnika v spodnjem levem kotu vmesnika.
  2. Kliknite na Razširitve.
  3. Poiščite katero koli od zgoraj omenjenih tem ali preprosto filtrirajte kategorijo teme in prebrskajte, kaj je na voljo.

Ali je VSCode najboljši urejevalnik oznak?

Torej, ali je VSCode ultimativni urejevalnik Markdown za spletno vsebino? Izven škatle verjetno ne. Vendar je približno tako razširljiv, kot bi lahko bil kar koli.

Števci besed, črkovalniki, Copy Markdown kot HTML, prilagoditve predogleda in teme so samo praske po površini. Za VSCode je na voljo ekosistem, poln razširitev, ki ga lahko naredite po svoje.