Jei rašote žiniatinklyje, galbūt norėsite pasidomėti Markdown. Yra daugybė „Markdown“ programų, skirtų žiniatinklio rašytojams. Tačiau nemokami kodo redaktoriai, tokie kaip „Microsoft Visual Studio Code“ (VSCode), gali būti dar galingesni.

„VSCode“ supranta „Markdown“ ir turi integruotus įrankius, skirtus peržiūrėti jį HTML. Tačiau galite pridėti teksto rengyklės funkcijų, pvz., žodžių skaičių ir rašybos tikrintuvą. Taip pat galbūt norėsite įgalinti peržiūros programos pritaikymus konkrečiai svetainei.

Galiausiai, galimybė nukopijuoti Markdown kaip HTML, kad galėtumėte švariai įklijuoti jį į turinio valdymo sistemą (TVS), yra būtina.

Atsisiųskite ir įdiekite VSCode

Norėdami pradėti, atsisiųskite VSCode arba jo atvirojo kodo alternatyvą VSCodium. Kiekvienos versijos yra prieinamos visoms pagrindinėms darbalaukio operacinėms sistemoms.

Kai tik jūs atsisiuntė ir įdiegė VSCode, paleiskite programą, kad pradėtumėte.

Įdiekite žodžių skaičiaus plėtinį

Pradėkite pridėdami žodžių skaitiklį. Yra daug plėtinių, kurie tai atlieka. Geriausiai išskiria tikrus žodžius nuo kodo ar failų pavadinimų, tai yra pačios Microsoft Word Counter plėtinys.

instagram viewer

Parsisiųsti:Žodžių skaičius VSCode plėtinys (nemokamas)

  1. Spustelėkite Atsisiųskite plėtinį pagal Ištekliai apatiniame dešiniajame skydelyje.
  2. Atsisiuntę pereikite prie VSCode.
  3. Spustelėkite ant krumpliaračio piktograma apatiniame kairiajame sąsajos kampe.
  4. Spustelėkite Plėtiniai.
  5. Spustelėkite elipsę (...) šalia plėtinių srities viršaus.
  6. Spustelėkite Įdiegti iš VSIX.
  7. Pasirink ms-vscode.wordcount-*.vsix failą, kurį ką tik atsisiuntėte.

The Žodžių skaičius dabar turėtų būti įdiegtas plėtinys. Išbandykite tai atidarydami naują Markdown failą ir įvesdami. Dabar apatinėje kairėje sąsajos pusėje turėtumėte pamatyti žodžių skaitiklį:

Įdiekite rašybos tikrinimo plėtinį

Taip pat norėsite pridėti rašybos tikrinimo funkciją. Kaip ir žodžių skaitikliuose, yra daug plėtinių, kurie tvarko rašybą. Populiariausias yra Kodo rašybos tikrinimas „Street Side Software“, nes ji prieinama daugeliu kalbų.

Parsisiųsti:Kodo rašybos tikrinimas VSCode plėtinys (nemokamas)

  1. Atlikite 1–6 veiksmus iš anksčiau pateiktos skilties.
  2. Pasirink streetsidesoftware.code-spell-checker-*.vsix failą, kurį ką tik atsisiuntėte.

The Kodo rašybos tikrinimas dabar turėtų būti įdiegtas plėtinys. Išbandykite tai atidarydami naują Markdown failą ir įvesdami klaidingai parašytus žodžius.

Po šiais žodžiais turėtumėte matyti mėlyną vingiuojančią liniją ir klaidų skaičių apatinėje dešinėje sąsajos pusėje:

Tinkinkite klaidų juostą

Didžiausia šio rašybos tikrinimo plėtinio problema yra silpna mėlyna spalva, naudojama klaidoms identifikuoti. Jis linkęs įsilieti į tamsių temų foną ir pakartotinai naudojamas kitiems Markdown elementams.

Galite pabandyti pakeisti paryškintą raudoną spalvą, kaip tikėtumėte matyti teksto rengyklėje:

  1. Spustelėkite ant krumpliaračio piktograma apatiniame kairiajame sąsajos kampe.
  2. Spustelėkite Nustatymai.
  3. Spustelėkite Darbo stalas, tada Išvaizda.
  4. Slinkite žemyn iki Spalvų pritaikymas:
  5. Spustelėkite Redaguokite adresu settings.json.
  6. Įklijuokite šį kodą į redagavimo priemonę, kuri atsidaro naujame skirtuke:
    "editorInfo.foreground": "#ff0000"
  7. Uždarykite ir išsaugokite failą.

Dabar, jei neteisingai parašysite žodį, „VSCode“ jį papuoš ryškiai raudonu raišteliu:

Klaidingų teiginių ignoravimas

Rašybos tikrintuvas gali neatpažinti tam tikrų konkrečiai pramonės šakai būdingų terminų ar tikrinių daiktavardžių, pvz., įmonių pavadinimų. Pavyzdžiui, aukščiau esančioje ekrano kopijoje VSCode paryškina santrumpą „distro“ kaip rašybos klaidą.

Jei norite, kad šie žodžiai nebūtų rodomi kaip klaidos, pridėkite juos prie savo Vartotojo nustatymai.

  1. Dešiniuoju pelės mygtuku spustelėkite žodį, kurio rašybos tikrintuvas nepaiso.
  2. Užveskite pelės žymeklį virš Tarimas ir pasirinkite Pridėkite žodžių prie vartotojo nustatymų.

Nuo šiol rašybos tikrinimas nebeidentifikuos šių žodžių kaip neteisingų:

Įdiekite „Copy Markdown“ kaip HTML plėtinį

Tada įdiekite „Copy Markdown“ kaip HTML plėtinį, kad galėtumėte nukopijuoti ir įklijuoti suformatuotą „Markdown“.

Parsisiųsti:Nukopijuokite Markdown kaip HTML VSCode plėtinys (nemokamas)

  1. Atlikite 1–6 veiksmus iš anksčiau pateiktų skyrių.
  2. Pasirink jerriepelser.copy-markdown-as-html-1.1.0.vsix failą, kurį ką tik atsisiuntėte.

Dabar turėtumėte galėti nukopijuoti Markdown iš VSCode ir įklijuoti jį į TVS kaip švarų HTML. Norėdami tai išbandyti:

  1. Pasirinkite tam tikrą žymėjimo tekstą.
  2. Atidaryk Komandų paletė viduje Žiūrėti meniu arba paspausdami CTRL + Shift + P.
  3. Pasirinkite Pažymėjimas: nukopijuokite kaip HTML:
  4. Įklijuokite nukopijuotą žymėjimą į naują HTML failą.

Turėtumėte pamatyti, kad nukopijuotas Markdown buvo tinkamai įklijuotas kaip HTML:

Peržiūros srities tinkinimas

Pagal numatytuosius nustatymus peržiūros sritis bus tokio paties stiliaus kaip ir dabartinė VSCode tema.

Tačiau galbūt norėsite, kad peržiūros labiau atspindėtų jūsų turinio galutinę paskirtį. Galite tinkinti peržiūros sritį, kad jūsų žymėjimas atrodytų taip, lyg jis jau būtų svetainėje, kurioje skelbiate.

Galite naudoti bet kurią norimą svetainę; iš MUO paimti šie stiliai. Tiesiog šriftams rasti naudokite naršyklės elementų tikrinimo įrankį ir pasirinkti spalvas iš bet kurios svetainės.

  1. Sukurkite naują failą ir pavadinkite jį kaip "CustomStyles.css"
  2. Į failą įklijuokite šį pavyzdinį CSS kodą:
    kūnas {
     fono spalva: #fff;
     spalva: #2c2c2c;
     šriftų šeima: Roboto;
     šrifto dydis: 18 pikselių;
     šrifto svoris: 400;
    linijos aukštis: 1.7em;
     maksimalus plotis: 750 pikselių;
    }
    h1 {
     šrifto dydis: 38 pikseliai;
     šrifto svoris: 800;
    }
    

    h2 {
     šrifto dydis: 34 pikseliai;
     šrifto svoris: 700;
    }
    

    h3 {
     šrifto dydis: 24 pikseliai;
     šrifto svoris: 700;
    }
    

    a {
     apačia: 2px kietas #bf0d0b;
     spalva: #bf0d0b;
     šrifto svoris: 700;
    }
    

    a:užveskite pelės žymeklį {
     spalva: #fff;
     fonas: #bf0d0b;
    }
    stiprus {
     šrifto svoris: paryškintas;
    }
  3. Uždarykite ir išsaugokite failą.
  4. Spustelėkite ant krumpliaračio piktograma apatiniame kairiajame sąsajos kampe.
  5. Spustelėkite Nustatymai.
  6. Spustelėkite Plėtiniai ir tada Užsirašyk.
  7. Slinkite žemyn iki Pažymėjimas: stiliai ir spustelėkite Pridėti daiktą.
  8. Įveskite savo kelią CustomStyles.css failas, pavyzdžiui:
    C:\Vartotojai\Adomas\CustomStyles.css
  9. Spustelėkite Gerai.

Kai tai padarysite, turėtumėte gauti peržiūros sritį, kuri atrodo panašiai kaip šis straipsnis.

Vėlgi, šias reikšmes gavau naudodamas savo naršyklės įrankį Inspect Element MUO, bet jūs norėsite rasti savo paskirties svetainės reikšmes.

Redaktorius temos

Numatytoji VSCode tema yra tiek tamsi, tiek šviesi, su didelio kontrasto versijomis. Tačiau, kaip ir bet kuris geras kodo redaktorius, yra yra daugybė puikių trečiųjų šalių temų.

Jei jums labiau patinka teksto rengyklė, o ne kodų rengyklė, rekomenduoju „Office“ temą, kurią sukūrė huacat:

Jei jums labiau patinka kodo rengyklė, įprastos temos, pvz., „Drakula“, „Gruvbox“, „Medžiaga“ (žr. toliau pateiktą ekrano kopiją) ir „Nord“, yra prieinamos plėtinių rinkoje.

Norėdami įdiegti naują temą:

  1. Spustelėkite ant krumpliaračio piktograma apatiniame kairiajame sąsajos kampe.
  2. Spustelėkite Plėtiniai.
  3. Ieškokite bet kurios iš aukščiau paminėtų temų arba tiesiog filtruokite kategoriją temos ir naršykite, kas yra prieinama.

Ar „VSCode“ yra „Ultimate Markdown“ redaktorius?

Taigi, ar „VSCode“ yra geriausias „Markdown“ žiniatinklio turinio redaktorius? Išimtas, tikriausiai ne. Tačiau jis yra tiek pat išplečiamas, kiek tik gali būti.

Žodžių skaitikliai, rašybos tikrintuvai, Kopijuoti žymėjimą kaip HTML, peržiūros tinkinimai ir temos tiesiog subraižo paviršių. Yra ekosistema, pilna VSCode plėtinių, ir jūs galite laisvai pasidaryti jį savo.