Jos kirjoitat verkkoon, sinun kannattaa tutustua Markdowniin. Markdown-sovelluksia on paljon, jotka palvelevat verkkokirjoittajia. Mutta ilmaiset koodieditorit, kuten Microsoftin Visual Studio Code (VSCode), voivat olla vieläkin tehokkaampia.

VSCode ymmärtää Markdownin ja siinä on sisäänrakennetut työkalut sen esikatseluun HTML-muodossa. Voit kuitenkin lisätä tekstinkäsittelytoimintoja, kuten sanamäärän ja oikeinkirjoituksen tarkistuksen. Haluat ehkä myös ottaa käyttöön esikatseluohjelmassa verkkosivustokohtaiset mukautukset.

Lopuksi, kyky kopioida Markdown HTML-muodossa, jotta voit liittää sen selkeästi sisällönhallintajärjestelmään (CMS), on pakollinen.

Lataa ja asenna VSCode

Aloita lataamalla joko VSCode tai sen avoimen lähdekoodin vaihtoehto VSCodium. Jokaisesta on saatavilla versiot kaikille tärkeimmille työpöytäkäyttöjärjestelmille.

Kun olet ladattu ja asennettu VSCode, suorita sovellus aloittaaksesi.

Asenna Word Count -laajennus

Aloita lisäämällä sanalaskuri. Saatavilla on monia laajennuksia, jotka käsittelevät tätä. Se, joka parhaiten erottaa todelliset sanat koodista tai tiedostonimistä, on Microsoftin oma Word Counter -laajennus.

instagram viewer

Ladata:Sanamäärä VSCode-laajennus (ilmainen)

  1. Klikkaa Lataa laajennus alla Resurssit oikeassa alakulmassa.
  2. Kun olet ladannut, vaihda VSCodeen.
  3. Klikkaa rataskuvake käyttöliittymän vasemmassa alakulmassa.
  4. Klikkaa Laajennukset.
  5. Napsauta ellipsiä (...) Laajennukset-ruudun yläosassa.
  6. Klikkaus Asenna VSIX: stä.
  7. Valitse ms-vscode.wordcount-*.vsix juuri lataamasi tiedosto.

The Sanamäärä laajennus pitäisi nyt asentaa. Testaa sitä avaamalla uusi Markdown-tiedosto ja kirjoittamalla. Sinun pitäisi nyt nähdä sanalaskuri käyttöliittymän vasemmassa alakulmassa:

Asenna oikeinkirjoituksen tarkistuslaajennus

Haluat myös lisätä oikeinkirjoituksen tarkistustoiminnon. Kuten sanalaskureissa, on monia laajennuksia, jotka käsittelevät oikeinkirjoituksen tarkistusta. Suosituin on Koodin oikeinkirjoituksen tarkistus Street Side Softwaren, koska se on saatavilla useilla kielillä.

Ladata:Koodin oikeinkirjoituksen tarkistus VSCode-laajennus (ilmainen)

  1. Noudata yllä olevan osan vaiheita 1–6.
  2. Valitse streetsidesoftware.code-spell-checker-*.vsix juuri lataamasi tiedosto.

The Koodin oikeinkirjoituksen tarkistus laajennus pitäisi nyt asentaa. Testaa sitä avaamalla uusi Markdown-tiedosto ja kirjoittamalla väärin kirjoitetut sanat.

Käyttöliittymän oikeassa alakulmassa pitäisi näkyä sininen kiemurainen viiva näiden sanojen alla sekä virhemäärä:

Mukauta Error Squiggleä

Tämän oikeinkirjoituksen tarkistuslaajennuksen suurin ongelma on heikko sininen väri, jota käytetään virheet tunnistavassa kierteessä. Sillä on taipumus sulautua tummien teemojen taustaan, ja sitä käytetään uudelleen muihin Markdown-elementteihin.

Voit yrittää muuttaa sen lihavoiduksi punaiseksi, kuten tekstinkäsittelyohjelmassa voi odottaa:

  1. Klikkaa rataskuvake käyttöliittymän vasemmassa alakulmassa.
  2. Klikkaa asetukset.
  3. Klikkaa Työpöytä, sitten Ulkomuoto.
  4. Vieritä alas kohtaan Värien mukauttaminen:
  5. Klikkaus Muokkaa tiedostossa settings.json.
  6. Liitä seuraava koodi uuteen välilehteen avautuvaan editoriin:
    "editorInfo.foreground": "#ff0000"
  7. Sulje ja tallenna tiedosto.

Jos nyt kirjoitat sanan väärin, VSCode koristaa sen kirkkaan punaisella värjäyksellä:

Väärien positiivisten huomioimatta jättäminen

Oikoluku ei välttämättä tunnista tiettyjä toimialakohtaisia ​​termejä tai erisnimisiä, kuten yritysten nimiä. Esimerkiksi yllä olevassa kuvakaappauksessa VSCode korostaa lyhenteen "distro" kirjoitusvirheenä.

Jos et halua nähdä näitä sanoja virheinä, sinun kannattaa lisätä ne sanaasi Käyttäjäasetukset.

  1. Napsauta hiiren kakkospainikkeella sanaa, jonka haluat oikoluvun ohittavan.
  2. Vie hiiri päälle Oikeinkirjoitus ja valitse Lisää sanoja käyttäjäasetuksiin.

Tästä lähtien oikeinkirjoituksen tarkistus ei enää tunnista näitä sanoja virheellisiksi:

Asenna Kopioi Markdown HTML-laajennukseksi

Asenna seuraavaksi Copy Markdown HTML-laajennus, jotta voit kopioida ja liittää muotoillun Markdownin.

Ladata:Kopioi Markdown HTML-muodossa VSCode-laajennus (ilmainen)

  1. Noudata yllä olevien osioiden vaiheita 1–6.
  2. Valitse jerriepelser.copy-markdown-as-html-1.1.0.vsix juuri lataamasi tiedosto.

Nyt sinun pitäisi pystyä kopioimaan Markdown VSCodesta ja liittämään se CMS: ään puhtaana HTML-muotona. Testaaksesi tätä:

  1. Valitse jokin Markdown-teksti.
  2. Avaa Komentopaletti in Näytä valikosta tai painamalla CTRL+Shift+P.
  3. Valita Markdown: Kopioi HTML-muodossa:
  4. Liitä kopioitu Markdown uuteen HTML-tiedostoon.

Sinun pitäisi nähdä, että kopioitu Markdown oli liitetty oikein HTML-muodossa:

Esikatseluruudun mukauttaminen

Oletusarvoisesti esikatseluruudulla on sama tyyli kuin nykyisellä VSCode-teemalla.

Voit kuitenkin haluta esikatselun kuvaavan tarkemmin sisältösi lopullista kohdetta. Voit mukauttaa esikatseluruutua saadaksesi Markdownin näyttämään siltä, ​​että se on jo verkkosivustolla, jossa julkaiset.

Voit käyttää mitä tahansa haluamaasi verkkosivustoa; seuraavat tyylit on otettu MUO: lta. Vain käytä selaimesi tarkastuselementtityökalua fonttien etsimiseen ja valita värit mistä tahansa verkkosivustosta.

  1. Luo uusi tiedosto ja anna sille nimeksi "CustomStyles.css"
  2. Liitä tiedostoon seuraava esimerkki CSS-koodista:
    body {
     taustaväri: #F F F;
     väri: #2c2c2c;
     kirjasinperhe: Roboto;
     fonttikoko: 18px;
     fontin paino: 400;
    viivankorkeus: 1.7em;
     suurin leveys: 750 pikseliä;
    }
    h1 {
     fonttikoko: 38px;
     fontin paino: 800;
    }
    

    h2 {
     fonttikoko: 34px;
     fontin paino: 700;
    }
    

    h3 {
     fonttikoko: 24px;
     fontin paino: 700;
    }
    

    a {
     border-bottom: 2px kiinteä #bf0d0b;
     väri: #bf0d0b;
     fontin paino: 700;
    }
    

    a:hover {
     väri: #F F F;
     tausta: #bf0d0b;
    }
    vahva {
     fontin paino: lihavoitu;
    }
  3. Sulje ja tallenna tiedosto.
  4. Klikkaa rataskuvake käyttöliittymän vasemmassa alakulmassa.
  5. Klikkaa asetukset.
  6. Klikkaa Laajennukset ja sitten Markdown.
  7. Vieritä alas kohtaan Markdown: Tyylit ja napsauta Lisää tavara.
  8. Anna polkusi CustomStyles.css tiedosto esimerkiksi:
    C:\Käyttäjät\Adam\CustomStyles.css
  9. Klikkaus OK.

Kun olet tehnyt nämä, sinun pitäisi päätyä esikatseluruutuun, joka näyttää paljon tämän artikkelin kaltaisesta.

Jälleen sain nämä arvot käyttämällä selaimeni Inspect Element -työkalua MUO: ssa, mutta haluat löytää arvot omalle kohdesivustollesi.

Editor Teemat

Oletusarvoinen VSCode-teema on sekä tumma että vaalea, ja molemmista on suurikontrastinen versio. Mutta kuten mikä tahansa hyvä koodieditori, niitä on saatavilla paljon mahtavia kolmannen osapuolen teemoja.

Jos pidät tekstinkäsittelyohjelman ulkonäöstä koodieditorin sijaan, suosittelen huacatin Office-teemaa:

Jos haluat käyttää koodieditoria, yleiset teemat, kuten Dracula, Gruvbox, Material (katso kuvakaappaus alla) ja Nord, ovat kaikki saatavilla laajennusmarkkinoilta.

Asenna uusi teema:

  1. Klikkaa rataskuvake käyttöliittymän vasemmassa alakulmassa.
  2. Klikkaa Laajennukset.
  3. Hae mitä tahansa yllä mainituista teemoista tai suodata vain luokka teemoja ja selaa mitä on saatavilla.

Onko VSCode Ultimate Markdown Editor?

Joten onko VSCode paras Markdown-editori verkkosisällölle? Valmis, luultavasti ei. Mutta se on niin laajennettavissa kuin mikä tahansa voi olla.

Sanalaskurit, oikoluku, Kopioi Markdown HTML-muodossa, esikatselun mukautukset ja teemat vain raaputtavat pintaa. VSCodelle on saatavilla ekosysteemi täynnä laajennuksia, ja voit vapaasti tehdä siitä omasi.