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.
În cele din urmă, abilitatea de a copia Markdown ca HTML, astfel încât să îl puteți lipi curat într-un sistem de gestionare a 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.
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ă)
- Click pe Descărcați extensia sub Resurse în panoul din dreapta jos.
- Odată descărcat, treceți la VSCode.
- Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
- Click pe Extensii.
- Faceți clic pe punctele de suspensie (...) în partea de sus a panoului Extensii.
- Clic Instalați de pe VSIX.
- 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:
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ă)
- Urmați pașii de la 1 la 6 din secțiunea de mai sus.
- 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.
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:
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:
- Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
- Click pe Setări.
- Click pe Banc de lucru, apoi Aspect.
- Derulați în jos la Personalizarea culorilor:
- Clic Editați în settings.json.
- Lipiți următorul cod în editorul care se deschide într-o filă nouă:
"editorInfo.prim-plan": "#ff0000" - Închideți și salvați fișierul.
Acum, dacă scrieți greșit un cuvânt, VSCode îl va decora cu un squiggle roșu aprins:
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.
- Faceți clic dreapta pe cuvântul pe care doriți să îl ignore verificatorul ortografic.
- Pune deasupra Ortografie și selectați Adăugați cuvinte la setările utilizatorului.
De acum înainte, verificarea ortografică nu va mai identifica aceste cuvinte ca fiind incorecte:
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ă)
- Urmați pașii de la 1 la 6 din secțiunile de mai sus.
- 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:
- Selectați un text Markdown.
- Deschide Paleta de comenzi în Vedere meniu sau apăsând CTRL+Shift+P.
- Alege Markdown: copiați ca HTML:
- 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:
Personalizarea panoului de previzualizare
În mod implicit, panoul de previzualizare va avea același stil ca și tema curentă VSCode.
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.
- Creați un fișier nou și denumiți-l așa cum ar fi "CustomStyles.css"
- Lipiți următorul exemplu de cod CSS în fișier:
corp {
culoare de fundal: #fff;
culoare: #2c2c2c;
familie de fonturi: Roboto;
dimensiunea fontului: 18px;
greutate font: 400;
inaltimea liniei: 1.7em;
lățime maximă: 750px;
}h1 {
dimensiunea fontului: 38px;
greutate font: 800;
}h2 {
dimensiunea fontului: 34px;
greutate font: 700;
}h3 {
dimensiunea fontului: 24px;
greutate font: 700;
}A {
margine de jos: 2px solid #bf0d0b;
culoare: #bf0d0b;
greutate font: 700;
}A:planare {
culoare: #fff;
fundal: #bf0d0b;
}puternic {
greutate font: bold;
} - Închideți și salvați fișierul.
- Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
- Click pe Setări.
- Click pe Extensii și apoi Markdown.
- Derulați în jos la Markdown: Stiluri și faceți clic Adaugare element.
- Intră pe calea ta CustomStyles.css fișier, de exemplu:
C:\Utilizatori\Adam\CustomStyles.css - 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 cod, temele 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ă:
- Faceți clic pe pictograma roții în colțul din stânga jos al interfeței.
- Click pe Extensii.
- 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.
