Com convertir VSCode en l'editor de Markdown definitiu

Com convertir VSCode en l'editor de Markdown definitiu

Si escriviu per a la web, potser voldreu mirar Markdown. Hi ha moltes aplicacions de Markdown que s'adrecen als escriptors web. Però els editors de codi gratuït com Visual Studio Code (VSCode) de Microsoft poden ser encara més potents.





VSCode entén Markdown i té eines integrades per previsualitzar-lo en HTML. Tanmateix, podeu afegir una funcionalitat de processador de textos com el recompte de paraules i un corrector ortogràfic. També és possible que vulgueu habilitar les personalitzacions específiques del lloc web per al visualitzador.



MAKEUSEO VÍDEO DEL DIA

Finalment, és imprescindible la possibilitat de copiar Markdown com a HTML perquè pugueu enganxar-lo netament en un sistema de gestió de continguts (CMS).





Baixeu i instal·leu VSCode

Per començar, descarregueu VSCode o la seva alternativa de codi obert VSCodium. Les versions de cadascun estan disponibles per a tots els principals sistemes operatius d'escriptori.

Un cop ho hagis fet VSCode descarregat i instal·lat , executeu l'aplicació per començar.



La pantalla de benvinguda predeterminada del VSCode.

Instal·leu l'extensió de recompte de paraules

Comenceu afegint un comptador de paraules. Hi ha moltes extensions disponibles que gestionen això. La que millor diferencia entre paraules reals i codi o noms de fitxers és l'extensió Word Counter de Microsoft.

Descarregar: Nombre de paraules Extensió VSCode (gratuïta)



  1. Fer clic a Descarrega l'extensió sota Recursos al panell inferior dret.
  2. Un cop descarregat, canvieu a VSCode.
  3. Feu clic a icona d'engranatge a la cantonada inferior esquerra de la interfície.
  4. Fer clic a Extensions .
  5. Feu clic als punts suspensius ( ... ) a prop de la part superior del panell Extensions.
  6. Feu clic Instal·leu des de VSIX . ​​​​​​​VSCode amb l'extensió Word Count de Microsoft es mostra detectant el nombre de paraules en un document de mostra.
  7. Escull el ms-vscode.wordcount-*.vsix fitxer que acabeu de baixar.

El Nombre de paraules Ara s'hauria d'instal·lar l'extensió. Proveu-ho obrint un fitxer Markdown nou i escrivint. Ara hauríeu de veure un comptador de paraules a la part inferior esquerra de la interfície:

​​​​​​​Un document de remarcació obert a VSCode amb faltes d'ortografia detectades per un subratllat suau de color blau ondulat.

Instal·leu l'extensió de verificació ortogràfica

També voldreu afegir la funcionalitat de correcció ortogràfica. Igual que amb els comptadors de paraules, hi ha moltes extensions que gestionen la correcció ortogràfica. El més popular és Correcció ortogràfica del codi de Street Side Software, ja que està disponible en molts idiomes.



Descarregar: Correcció ortogràfica del codi Extensió VSCode (gratuïta)

Windows 10 system_service_exception
  1. Seguiu els passos de l'1 al 6 de la secció anterior.
  2. Escull el streetsidesoftware.code-corrector-ortogràfic-*.vsix fitxer que acabeu de baixar.

El Correcció ortogràfica del codi Ara s'hauria d'instal·lar l'extensió. Proveu-ho obrint un nou fitxer Markdown i escrivint paraules mal escrites.

​​​​​​​La part inferior dreta de la barra d'estat del VSCode amb un indicador que mostra quatre errors ortogràfics.

Hauríeu de veure una línia ondulada blava sota aquestes paraules juntament amb un recompte d'errors a la part inferior dreta de la interfície:

El fitxer VSCode settings.json s'obre amb el codi personalitzat afegit.

Personalitzeu l'error Squiggle

El problema més gran d'aquesta extensió de correcció ortogràfica és el color blau feble que s'utilitza per al gargot que identifica els errors. Acostuma a combinar-se amb el fons de temes foscos i es reutilitza per a altres elements de Markdown.

Podeu provar de canviar-lo a un color vermell atrevit com espereu veure en un processador de textos:

  1. Feu clic a icona d'engranatge a la cantonada inferior esquerra de la interfície.
  2. Fer clic a Configuració .
  3. Fer clic a Banc de treball , doncs Aparença .
  4. Desplaceu-vos cap avall fins a Personalització del color : Un document de remarcació obert a VSCode amb faltes d'ortografia flagrants detectades per un subratllat ondulat vermell fort.
  5. Feu clic Edita a settings.json .
  6. Enganxeu el codi següent a l'editor que s'obre en una pestanya nova: 
    "editorInfo.foreground": "#ff0000"
    Un document de remarcació obert a VSCode amb tres errors ortogràfics.
  7. i deseu el fitxer.

Ara, si escriviu malament una paraula, VSCode la decorarà amb un gargot vermell brillant:

Un document HTML amb el format adequat obert a VSCode.

Ignorant els falsos positius

És possible que el corrector ortogràfic no reconegui determinats termes específics del sector o noms propis, com ara els noms d'empreses. A la captura de pantalla de dalt, per exemple, VSCode destaca l'abreviatura 'distro' com una falta d'ortografia.

Per deixar de veure aquestes paraules com a errors, voldreu afegir-les al vostre Configuració d'usuari .

  1. Feu clic amb el botó dret a la paraula que voleu que el corrector ortogràfic ignori.
  2. Passa el cursor per sobre Ortografia i seleccioneu Afegiu paraules a la configuració de l'usuari . ​​​​​​​Aquest article com a fitxer de remarcació s'obre a VSCode amb el previsualitzador predeterminat.

A partir d'ara, la correcció ortogràfica deixarà d'identificar aquestes paraules com a incorrectes:

​​​​​​​La configuració del VSCode > Extensions > Markdown > Markdown: menú d'estils.

Instal·leu Copy Markdown com a extensió HTML

A continuació, instal·leu l'extensió Copia Markdown com a HTML perquè pugueu copiar i enganxar Markdown amb format.

Descarregar: Copia Markdown com a HTML Extensió VSCode (gratuïta)

  1. Seguiu els passos de l'1 al 6 de les seccions anteriors.
  2. Escull el jerriepelser.copy-markdown-as-html-1.1.0.vsix fitxer que acabeu de baixar.

Ara hauríeu de poder copiar Markdown de VSCode i enganxar-lo a un CMS com a HTML net. Per provar això:

  1. Seleccioneu un text de Markdown.
  2. Obriu el Paleta d'ordres en el Veure menú, o prement CTRL+Maj+P .
  3. Tria Markdown: Copia com a HTML : Aquest article com a fitxer de remarcació obert a VSCode amb el visualitzador personalitzat per semblar-se a MUO.
  4. Enganxeu el Markdown copiat en un fitxer HTML nou.

Hauríeu de veure que el Markdown copiat s'ha enganxat correctament com a HTML:

La pantalla de benvinguda de VSCode en el tema clar.

Personalització del panell de previsualització

De manera predeterminada, el panell de vista prèvia tindrà el mateix estil que el tema de VSCode actual.

La reducció d'aquest article s'obre a VSCode utilitzant el tema d'Office per huacat.

Tanmateix, és possible que vulgueu que les previsualitzacions reflecteixin més de prop la destinació final del vostre contingut. Podeu personalitzar el panell de vista prèvia perquè el vostre Markdown sembli que ja es troba al lloc web on esteu publicant.

Podeu utilitzar qualsevol lloc web que vulgueu; els estils següents van ser extrets de MUO. Només utilitzeu l'eina d'inspecció d'elements del vostre navegador per trobar tipus de lletra i triar colors de qualsevol lloc web .

  1. Creeu un fitxer nou i poseu-li un nom com ' CustomStyles.css '
  2. Enganxeu el codi CSS d'exemple següent al fitxer: 
    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 deseu el fitxer.
  4. Feu clic a icona d'engranatge a la cantonada inferior esquerra de la interfície.
  5. Fer clic a Configuració .
  6. Fer clic a Extensions i llavors Reducció .
  7. Desplaceu-vos cap avall fins a Markdown: estils i feu clic Afegeix un element .
  8. Introdueix el camí del teu CustomStyles.css fitxer, per exemple:
    C:\Users\Adam\CustomStyles.css
    La reducció d'aquest article s'obre a VSCode utilitzant el tema Material d'Equinusocio.
  9. Feu clic D'acord .

Un cop els hàgiu fet, hauríeu d'acabar amb un panell de vista prèvia que s'assembla molt a aquest article.

Un cop més, vaig obtenir aquests valors mitjançant l'eina Inspecciona l'element del meu navegador a MUO, però voldreu trobar els valors per al vostre propi lloc web de destinació.

Temes de l'editor

El tema VSCode predeterminat ve tant en fosc com en clar, amb versions d'alt contrast de cadascun. Però, com qualsevol bon editor de codi, n'hi ha un munt de grans temes de tercers disponibles .

Si prefereixes l'aspecte d'un processador de textos que el d'un editor de codi, et recomano el tema d'Office de huacat:

Si preferiu un editor de codi, temes comuns com Dracula, Gruvbox, Material (vegeu la captura de pantalla a continuació) i Nord estan disponibles al mercat d'extensions.

Per instal·lar un tema nou:

  1. Feu clic a icona d'engranatge a la cantonada inferior esquerra de la interfície.
  2. Fer clic a Extensions .
  3. Cerqueu qualsevol dels temes esmentats anteriorment o simplement filtreu la categoria temes i navegar pel que hi ha disponible.

VSCode és l'editor de Markdown definitiu?

Aleshores, VSCode és l'editor de Markdown definitiu per a contingut web? Sortida de la caixa, probablement no. Però és tan extensible com qualsevol cosa podria ser.

Comptadors de paraules, correctors ortogràfics, Copia Markdown com a HTML, personalitzacions de previsualització i temes només ratllen la superfície. Hi ha un ecosistema ple d'extensions disponibles per a VSCode i podeu fer-lo vostre.