Kui kirjutate veebi jaoks, võiksite uurida Markdowni. Veebikirjutajate jaoks on palju Markdowni rakendusi. Kuid tasuta koodiredaktorid, nagu Microsofti Visual Studio Code (VSCode), võivad olla veelgi võimsamad.

VSCode mõistab Markdowni ja sellel on sisseehitatud tööriistad selle eelvaate kuvamiseks HTML-is. Siiski saate lisada tekstitöötlusprogrammi funktsioone, nagu sõnade arv ja õigekirjakontroll. Samuti võite soovida eelvaataja jaoks lubada veebisaidipõhised kohandused.

Lõpuks on oluline Markdowni kopeerimine HTML-ina, et saaksite selle sisuhaldussüsteemi (CMS) puhtalt kleepida.

Laadige alla ja installige VSCode

Alustuseks laadige alla VSCode või selle avatud lähtekoodiga alternatiiv VSCodium. Iga versiooni versioon on saadaval kõigi suuremate töölaua operatsioonisüsteemide jaoks.

Kui olete alla laaditud ja installitud VSCode, käivitage rakendus.

Installige sõnaloenduse laiendus

Alustage sõnade loenduri lisamisega. Sellega tegelemiseks on saadaval palju laiendusi. Kõige paremini eristab tegelikke sõnu ja koodi või failinimesid Microsofti enda laiend Word Counter.

instagram viewer

Lae alla:Sõnade arv VSCode laiendus (tasuta)

  1. Kliki Laadi alla laiendus all Vahendid alumises parempoolses paanis.
  2. Pärast allalaadimist lülituge VSCode'ile.
  3. Klõpsake nuppu hammasratta ikoon liidese vasakus alanurgas.
  4. Kliki Laiendused.
  5. Klõpsake ellipsil (...) laienduste paani ülaosas.
  6. Klõpsake Installige VSIX-ist.
  7. Vali ms-vscode.wordcount-*.vsix faili, mille just alla laadisite.

The Sõnade arv laiendus tuleks nüüd installida. Testige seda, avades uue Markdowni faili ja tippides. Nüüd peaksite liidese vasakus alanurgas nägema sõnade loendurit:

Installige õigekirjakontrolli laiendus

Samuti soovite lisada õigekirjakontrolli funktsiooni. Nagu sõnaloendurite puhul, on ka õigekirjakontrolliga tegelemiseks palju laiendusi. Kõige populaarsem on Koodi õigekirja kontroll Street Side Software'i poolt, kuna see on saadaval paljudes keeltes.

Lae alla:Koodi õigekirja kontroll VSCode laiendus (tasuta)

  1. Järgige ülaltoodud samme 1–6.
  2. Vali streetsidesoftware.code-spell-checker-*.vsix faili, mille just alla laadisite.

The Koodi õigekirja kontroll laiendus tuleks nüüd installida. Testige seda, avades uue Markdowni faili ja sisestades valesti kirjutatud sõnad.

Peaksite nende sõnade all nägema sinist kõverat joont koos vigade arvuga liidese paremas alanurgas:

Kohandage veateadet

Selle õigekirjakontrolli laienduse suurim probleem on nõrk sinine värv, mida kasutatakse vigu tuvastava viguri jaoks. See kipub sulanduma tumedate teemade taustale ja seda kasutatakse uuesti teiste Markdowni elementide jaoks.

Võite proovida muuta selle paksuks punaseks, nagu võiksite näha tekstitöötlusprogrammis.

  1. Klõpsake nuppu hammasratta ikoon liidese vasakus alanurgas.
  2. Kliki Seaded.
  3. Kliki Töölaud, siis Välimus.
  4. Kerige alla kuni Värvi kohandamine:
  5. Klõpsake Muutke failis settings.json.
  6. Kleepige järgmine kood redaktorisse, mis avaneb uuel vahelehel:
    "editorInfo.foreground": "#ff0000"
  7. Sulgege ja salvestage fail.

Nüüd, kui kirjutate sõna valesti, kaunistab VSCode selle helepunase viguriga:

Valepositiivsete tulemuste ignoreerimine

Õigekirjakontroll ei pruugi tuvastada teatud tööstusharuspetsiifilisi termineid või pärisnimesid, näiteks ettevõtete nimesid. Näiteks ülaltoodud ekraanipildil tõstab VSCode esile lühendi "distro" kui õigekirjavea.

Kui soovite, et need sõnad enam vigadena ei kuvataks, lisage need oma hulka Kasutaja seaded.

  1. Paremklõpsake sõnal, mida soovite õigekirjakontrollil ignoreerida.
  2. Hõljutage kursorit üle Õigekiri ja valige Lisage sõnu kasutajaseadetesse.

Nüüdsest ei tuvasta õigekirjakontroll enam neid sõnu valedena:

Installige Kopeeri Markdown HTML-laiendusena

Järgmisena installige Kopeeri Markdown HTML-laiendusena, et saaksite vormindatud Markdowni kopeerida ja kleepida.

Lae alla:Kopeerige Markdown HTML-ina VSCode laiendus (tasuta)

  1. Järgige ülaltoodud jaotiste samme 1–6.
  2. Vali jerriepelser.copy-markdown-as-html-1.1.0.vsix faili, mille just alla laadisite.

Nüüd peaksite saama Markdowni kopeerida VSCode'ist ja kleepida selle CMS-i puhta HTML-ina. Selle testimiseks tehke järgmist.

  1. Valige mõni Markdowni tekst.
  2. Ava Käsupalett aastal Vaade menüüst või vajutades CTRL+Shift+P.
  3. Vali Markdown: kopeeri HTML-ina:
  4. Kleepige kopeeritud Markdown uude HTML-faili.

Peaksite nägema, et kopeeritud Markdown on HTML-ina õigesti kleebitud:

Eelvaatepaani kohandamine

Vaikimisi on eelvaatepaanil sama stiil kui praegusel VSCode'i teemal.

Siiski võite soovida, et eelvaated kajastaksid täpsemalt teie sisu lõppsihtkohta. Saate eelvaatepaani kohandada nii, et Markdown näeks välja, nagu see oleks juba veebisaidil, kus avaldate.

Saate kasutada mis tahes soovitud veebisaiti; järgmised stiilid võeti MUO-st. Lihtsalt kasutage fontide leidmiseks brauseri elementide kontrollimise tööriista ja vali värve mis tahes veebisaidilt.

  1. Looge uus fail ja pange sellele nimeks "CustomStyles.css"
  2. Kleepige faili järgmine CSS-koodi näide:
    keha {
     taustavärv: #fff;
     värv: #2c2c2c;
     fondiperekond: Roboto;
     fondi suurus: 18 pikslit;
     fondi kaal: 400;
    reakõrgus: 1.7em;
     maksimaalne laius: 750 pikslit;
    }
    h1 {
     fondi suurus: 38 pikslit;
     fondi kaal: 800;
    }
    

    h2 {
     fondi suurus: 34 pikslit;
     fondi kaal: 700;
    }
    

    h3 {
     fondi suurus: 24 pikslit;
     fondi kaal: 700;
    }
    

    a {
     ääris-alumine: 2px tahke #bf0d0b;
     värv: #bf0d0b;
     fondi kaal: 700;
    }
    

    a:hõljuma {
     värv: #fff;
     taust: #bf0d0b;
    }
    tugev {
     fondi kaal: paks;
    }
  3. Sulgege ja salvestage fail.
  4. Klõpsake nuppu hammasratta ikoon liidese vasakus alanurgas.
  5. Kliki Seaded.
  6. Kliki Laiendused ja siis Allahindlus.
  7. Kerige alla kuni Markdown: stiilid ja klõpsake Lisa üksus.
  8. Sisestage oma tee CustomStyles.css fail, näiteks:
    C:\Kasutajad\Adam\Kohandatud stiilid.css
  9. Klõpsake Okei.

Kui olete need teinud, peaksite saama eelvaatepaani, mis sarnaneb selle artikliga.

Jällegi sain need väärtused oma brauseri tööriista Inspect Element abil MUO-s, kuid soovite leida väärtused oma sihtkoha veebisaidi jaoks.

Toimetaja teemad

VSCode'i vaiketeema on saadaval nii tumedas kui ka heledas värvitoonis ning mõlema suure kontrastsusega versioonid. Kuid nagu iga hea koodiredaktor, on ka neid Saadaval on palju suurepäraseid kolmanda osapoole teemasid.

Kui eelistate tekstiredaktori välimust koodiredaktorile, soovitan huacati Office'i teemat:

Kui eelistate koodiredaktorit, on laienduste turul saadaval sellised levinud teemad nagu Dracula, Gruvbox, Material (vt allpool olevat ekraanipilti) ja Nord.

Uue teema installimiseks toimige järgmiselt.

  1. Klõpsake nuppu hammasratta ikoon liidese vasakus alanurgas.
  2. Kliki Laiendused.
  3. Otsige mõnda ülalnimetatud teemadest või lihtsalt filtreerige kategooria teemad ja sirvige saadaolevat.

Kas VSCode on Ultimate Markdowni redaktor?

Niisiis, kas VSCode on veebisisu jaoks parim Markdowni redaktor? Kastist väljas, ilmselt mitte. Kuid see on umbes nii laiendatav, kui miski võiks olla.

Sõnaloendurid, õigekirjakontrollid, HTML-vormingus märgistuse kopeerimine, eelvaate kohandused ja teemad lihtsalt kriibivad pinda. VSCode'i jaoks on saadaval ökosüsteem täis laiendusi ja saate selle vabalt ise teha.