Cum să transformați VSCode în editorul de reducere final

Cum să transformați VSCode în editorul de reducere final

Dacă scrieți pentru web, poate doriți să vă uitați la Markdown. Există o mulțime de aplicații Markdown care se adresează scriitorilor web. Dar editorii de cod gratuit precum Visual Studio Code (VSCode) de la Microsoft pot fi și mai puternici.





VSCode înțelege Markdown și are instrumente încorporate pentru previzualizare în HTML. Cu toate acestea, puteți adăuga funcționalități de procesor de text, cum ar fi numărul de cuvinte și un verificator ortografic. De asemenea, este posibil să doriți să activați personalizări specifice site-ului web pentru previzualizare.





ce sa faci cu raspberry pi 2
REALIZAREA VIDEOCLIPULUI ZILEI

În cele din urmă, abilitatea de a copia Markdown ca HTML, astfel încât să îl puteți lipi curat într-un sistem de management al conținutului (CMS) este o necesitate.





Descărcați și instalați VSCode

Pentru a începe, descărcați fie VSCode, fie alternativa sa open source VSCodium. Versiunile fiecăruia sunt disponibile pentru toate sistemele de operare desktop majore.

Odată ce ai făcut descărcat și instalat VSCode , rulați aplicația pentru a începe.



  Ecranul implicit de bun venit VSCode.

Instalați extensia Număr de cuvinte

Începeți prin a adăuga un contor de cuvinte. Există multe extensii disponibile care se ocupă de acest lucru. Cea care diferențiază cel mai bine cuvintele reale și numele de cod sau fișiere este extensia Microsoft Word Counter.

Descarca: Număr de cuvinte Extensie VSCode (gratuită)





  1. Click pe Descărcați extensia sub Resurse în panoul din dreapta jos.
  2. Odată descărcat, treceți la VSCode.
  3. Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
  4. Click pe Extensii .
  5. Faceți clic pe punctele de suspensie ( ... ) în partea de sus a panoului Extensii.
  6. Clic Instalați de pe VSIX .   ​​​​​​​VSCode cu extensia Număr de cuvinte de la Microsoft arată detectarea numărului de cuvinte dintr-un document exemplu.
  7. Alege ms-vscode.wordcount-*.vsix fișierul pe care tocmai l-ați descărcat.

The Număr de cuvinte extensia ar trebui acum instalată. Testați-l deschizând un nou fișier Markdown și tastând. Ar trebui să vedeți acum un contor de cuvinte în partea din stânga jos a interfeței:

  ​​​​​​​Un document de reducere deschis în VSCode cu greșeli de ortografie detectate printr-o sublinie albastră moale și ondulată.

Instalați extensia de verificare ortografică

De asemenea, veți dori să adăugați și funcționalitate de verificare ortografică. Ca și în cazul contoarelor de cuvinte, există multe extensii care se ocupă de verificarea ortografică. Cel mai popular este Verificarea ortografică a codului de Street Side Software, deoarece este disponibil în mai multe limbi.





Descarca: Verificarea ortografică a codului Extensie VSCode (gratuită)

  1. Urmați pașii de la 1 la 6 din secțiunea de mai sus.
  2. Alege streetsidesoftware.code-verificator-ortografie-*.vsix fișierul pe care tocmai l-ați descărcat.

The Verificarea ortografică a codului extensia ar trebui acum instalată. Testați-l deschizând un nou fișier Markdown și tastând cuvinte greșite.

  ​​​​​​​Partea din dreapta jos a barei de stare VSCode cu un indicator care arată patru erori de ortografie.

Ar trebui să vedeți o linie albastră ondulată sub acele cuvinte, împreună cu un număr de erori în partea dreaptă jos a interfeței:

  Fișierul VSCode settings.json se deschide cu cod personalizat adăugat.

Personalizați Error Squiggle

Cea mai mare problemă cu această extensie de verificare a ortografiei este culoarea albastră slabă folosită pentru squiggle care identifică erorile. Tinde să se amestece în fundalul temelor întunecate și este reutilizat pentru alte elemente Markdown.

Puteți încerca să o schimbați într-o culoare roșie îndrăzneață, așa cum v-ați aștepta să vedeți într-un procesor de text:

  1. Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
  2. Click pe Setări .
  3. Click pe Banc de lucru , apoi Aspect .
  4. Derulați în jos la Personalizarea culorilor :   Un document de reducere deschis în VSCode cu greșeli de ortografie flagrante detectate de o subliniere puternică și ondulată roșie.
  5. Clic Editați în settings.json .
  6. Lipiți următorul cod în editorul care se deschide într-o filă nouă:
    "editorInfo.foreground": "#ff0000"
      Un document de reducere deschis în VSCode cu trei erori de ortografie.
  7. și salvați fișierul.

Acum, dacă scrieți greșit un cuvânt, VSCode îl va decora cu un squiggle roșu aprins:

  Un document HTML formatat corect deschis în VSCode.

Ignorarea falselor pozitive

Este posibil ca verificatorul ortografic să nu recunoască anumiți termeni specifici industriei sau substantive proprii, cum ar fi numele companiilor. În captura de ecran de mai sus, de exemplu, VSCode evidențiază abrevierea „distro” ca o greșeală de ortografie.

Pentru a nu mai vedea aceste cuvinte ca erori, va trebui să le adăugați la dvs Setarile utilizatorului .

  1. Faceți clic dreapta pe cuvântul pe care doriți să îl ignore verificatorul ortografic.
  2. Pune deasupra Ortografie și selectați Adăugați cuvinte la setările utilizatorului .   ​​​​​​​Acest articol ca fișier de reducere deschis în VSCode cu previzualizatorul implicit.

De acum înainte, verificarea ortografică nu va mai identifica aceste cuvinte ca fiind incorecte:

  ​​​​​​​Setări VSCode > Extensii > Markdown > Markdown: meniul Stiluri.

Instalați Copy Markdown ca extensie HTML

Apoi, instalați extensia Copiați Markdown ca HTML, astfel încât să puteți copia și lipi Markdown formatat.

Descarca: Copiați Markdown ca HTML Extensie VSCode (gratuită)

  1. Urmați pașii de la 1 la 6 din secțiunile de mai sus.
  2. Alege jerriepelser.copy-markdown-as-html-1.1.0.vsix fișierul pe care tocmai l-ați descărcat.

Acum ar trebui să puteți copia Markdown din VSCode și să îl inserați într-un CMS ca HTML curat. Pentru a testa asta:

raspberry pi 3b vs 3b +
  1. Selectați un text Markdown.
  2. Deschide Paleta de comenzi în Vedere meniu sau apăsând CTRL+Shift+P .
  3. Alege Markdown: copiați ca HTML :   Acest articol este un fișier de reducere deschis în VSCode cu previzualizatorul personalizat pentru a arăta ca MUO.
  4. Lipiți Markdown-ul copiat într-un fișier HTML nou.

Ar trebui să vedeți că Markdown-ul copiat a fost lipit corect ca HTML:

  Ecranul de bun venit VSCode în tema luminoasă.

Personalizarea panoului de previzualizare

În mod implicit, panoul de previzualizare va avea același stil ca și tema curentă VSCode.

  Reducerea acestui articol se deschide în VSCode folosind tema Office de la huacat.

Cu toate acestea, poate doriți ca previzualizările să reflecte mai îndeaproape destinația finală a conținutului dvs. Puteți personaliza panoul de previzualizare pentru ca Markdown să arate ca și cum ar fi deja pe site-ul web pe care publicați.

Puteți folosi orice site doriți; următoarele stiluri au fost preluate din MUO. Doar utilizați instrumentul de inspectare a elementelor din browser pentru a găsi fonturi și alege culori de pe orice site web .

  1. Creați un fișier nou și denumiți-l așa cum ar fi ' CustomStyles.css '
  2. Lipiți următorul exemplu de cod CSS în fișier:
    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 salvați fișierul.
  4. Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
  5. Click pe Setări .
  6. Click pe Extensii și apoi Markdown .
  7. Derulați în jos la Markdown: Stiluri și faceți clic Adaugare element .
  8. Intră pe calea ta CustomStyles.css fișier, de exemplu:
    C:\Users\Adam\CustomStyles.css
      Reducerea acestui articol se deschide în VSCode folosind tema Material de Equinusocio.
  9. Clic O.K .

Odată ce le-ați făcut, ar trebui să ajungeți cu un panou de previzualizare care seamănă mult cu acest articol.

Din nou, am obținut aceste valori folosind instrumentul Inspect Element al browserului meu pe MUO, dar veți dori să găsiți valorile pentru propriul site de destinație.

Editor teme

Tema implicită VSCode vine atât în ​​culori întunecate, cât și în lumină, cu versiuni cu contrast ridicat ale fiecăreia. Dar, ca orice editor de cod bun, există o mulțime de teme grozave terță parte disponibile .

Dacă preferați aspectul unui procesor de text față de cel al unui editor de cod, vă recomand tema Office de la huacat:

Dacă preferați un editor de coduri, teme comune precum Dracula, Gruvbox, Material (vezi captura de ecran de mai jos) și Nord sunt toate disponibile pe piața de extensii.

Pentru a instala o temă nouă:

  1. Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
  2. Click pe Extensii .
  3. Căutați oricare dintre temele menționate mai sus sau pur și simplu filtrați categoria la teme și răsfoiți ceea ce este disponibil.

Este VSCode Editorul de Markdown Ultimate?

Deci, este VSCode editorul Markdown suprem pentru conținut web? Ieșit din cutie, probabil că nu. Dar este cam cât de extensibil ar putea fi orice.

Numărătoare de cuvinte, verificatoare ortografice, copiere Markdown ca HTML, personalizări de previzualizare și teme doar zgârie suprafața. Există un ecosistem plin de extensii disponibile pentru VSCode și ești liber să-l faci al tău.

cum actualizați magazinul Google Play