Si escribe para la web, es posible que desee buscar en Markdown. Hay muchas aplicaciones de Markdown que se adaptan a los escritores web. Pero los editores de código gratuitos como Visual Studio Code (VSCode) de Microsoft pueden ser incluso más potentes.

VSCode entiende Markdown y tiene herramientas integradas para obtener una vista previa en HTML. Sin embargo, puede agregar la funcionalidad del procesador de textos, como el conteo de palabras y un corrector ortográfico. También es posible que desee habilitar las personalizaciones específicas del sitio web para la vista previa.

Finalmente, la capacidad de copiar Markdown como HTML para que pueda pegarlo limpiamente en un Sistema de gestión de contenido (CMS) es imprescindible.

Descargar e instalar VSCode

Para comenzar, descargue VSCode o su alternativa de código abierto VSCodium. Las versiones de cada uno están disponibles para los principales sistemas operativos de escritorio.

Una vez que hayas descargado e instalado VSCode, ejecute la aplicación para comenzar.

instagram viewer

Instalar la extensión de recuento de palabras

Comience agregando un contador de palabras. Hay muchas extensiones disponibles que manejan esto. La que mejor diferencia entre palabras reales y código o nombres de archivos es la propia extensión Word Counter de Microsoft.

Descargar:El recuento de palabras Extensión VSCode (Gratis)

  1. Haga clic en Descargar extensión por debajo Recursos en el panel inferior derecho.
  2. Una vez descargado, cambie a VSCode.
  3. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  4. Haga clic en Extensiones.
  5. Haga clic en los puntos suspensivos (...) cerca de la parte superior del panel Extensiones.
  6. Hacer clic Instalar desde VSIX.
  7. Elegir la ms-vscode.wordcount-*.vsix archivo que acaba de descargar.

los El recuento de palabras La extensión ahora debería estar instalada. Pruébelo abriendo un nuevo archivo Markdown y escribiendo. Ahora debería ver un contador de palabras en la parte inferior izquierda de la interfaz:

Instalar la extensión del corrector ortográfico

También querrá agregar la función de revisión ortográfica. Al igual que con los contadores de palabras, hay muchas extensiones que manejan la revisión ortográfica. El más popular es Verificación ortográfica del código por Street Side Software ya que está disponible en muchos idiomas.

Descargar:Verificación ortográfica del código Extensión VSCode (Gratis)

  1. Siga los pasos 1 a 6 de la sección anterior.
  2. Elegir la streetsidesoftware.code-spell-checker-*.vsix archivo que acaba de descargar.

los Verificación ortográfica del código La extensión ahora debería estar instalada. Pruébelo abriendo un nuevo archivo Markdown y escribiendo palabras mal escritas.

Debería ver una línea ondulada azul debajo de esas palabras junto con un recuento de errores en la parte inferior derecha de la interfaz:

Personaliza el garabato de error

El mayor problema con esta extensión del corrector ortográfico es el color azul débil que se usa para el garabato que identifica los errores. Tiende a mezclarse con el fondo de los temas oscuros y se reutiliza para otros elementos de Markdown.

Puede intentar cambiarlo a un color rojo intenso como esperaría ver en un procesador de textos:

  1. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  2. Haga clic en Ajustes.
  3. Haga clic en banco de trabajo, después Apariencia.
  4. Desplácese hacia abajo para Personalización de colores:
  5. Hacer clic Editar en settings.json.
  6. Pegue el siguiente código en el editor que se abre en una nueva pestaña:
    "editorInfo.primer plano": "#ff0000"
  7. Cierra y guarda el archivo.

Ahora, si escribe mal una palabra, VSCode la decorará con un garabato rojo brillante:

Ignorando los falsos positivos

Es posible que el corrector ortográfico no reconozca ciertos términos específicos de la industria o nombres propios, como nombres de empresas. En la captura de pantalla anterior, por ejemplo, VSCode resalta la abreviatura "distro" como un error ortográfico.

Para dejar de ver estas palabras como errores, querrá agregarlas a su Ajustes de usuario.

  1. Haga clic derecho en la palabra que desea que el corrector ortográfico ignore.
  2. pasar el cursor sobre Ortografía y seleccione Agregar palabras a la configuración del usuario.

A partir de ahora, el corrector ortográfico ya no identificará estas palabras como incorrectas:

Instalar Copy Markdown como extensión HTML

A continuación, instale Copiar Markdown como extensión HTML para que pueda copiar y pegar Markdown con formato.

Descargar:Copiar Markdown como HTML Extensión VSCode (Gratis)

  1. Siga los pasos del 1 al 6 de las secciones anteriores.
  2. Elegir la jerriepelser.copy-markdown-as-html-1.1.0.vsix archivo que acaba de descargar.

Ahora debería poder copiar Markdown de VSCode y pegarlo en un CMS como HTML limpio. Para probar esto:

  1. Seleccione algún texto de Markdown.
  2. Abre el Paleta de comandos en el Vista menú, o presionando CTRL+Mayús+P.
  3. Elegir Markdown: Copiar como HTML:
  4. Pegue el Markdown copiado en un nuevo archivo HTML.

Debería ver que el Markdown copiado se pegó correctamente como HTML:

Personalización del panel de vista previa

De forma predeterminada, el panel de vista previa tendrá el mismo estilo que el tema VSCode actual.

Sin embargo, es posible que desee que las vistas previas reflejen más fielmente el destino final de su contenido. Puede personalizar el panel de vista previa para que su Markdown parezca que ya está en el sitio web en el que está publicando.

Puede utilizar cualquier sitio web que desee; los siguientes estilos fueron tomados de MUO. Sólo use la herramienta de inspección de elementos de su navegador para encontrar fuentes y elegir colores de cualquier sitio web.

  1. Cree un nuevo archivo y llámelo algo como "CustomStyles.css"
  2. Pegue el siguiente código CSS de ejemplo en el archivo:
    cuerpo {
     color de fondo: #fff;
     color: #2c2c2c;
     familia tipográfica: Roboto;
     tamaño de fuente: 18px;
     peso de fuente: 400;
    altura de la línea: 1.7em;
     ancho máximo: 750px;
    }
    h1 {
     tamaño de fuente: 38px;
     peso de fuente: 800;
    }
    

    h2 {
     tamaño de fuente: 34px;
     peso de fuente: 700;
    }
    

    h3 {
     tamaño de fuente: 24px;
     peso de fuente: 700;
    }
    

    a {
     borde inferior: 2sólido #bf0d0b;
     color: #bf0d0b;
     peso de fuente: 700;
    }
    

    a:flotar {
     color: #fff;
     antecedentes: #bf0d0b;
    }
    fuerte {
     fuente-peso: negrita;
    }
  3. Cierra y guarda el archivo.
  4. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  5. Haga clic en Ajustes.
  6. Haga clic en Extensiones y entonces Reducción.
  7. Desplácese hacia abajo para Rebajas: Estilos y haga clic Añadir artículo.
  8. Introduzca la ruta de su CustomStyles.css archivo, por ejemplo:
    C:\Usuarios\Adán\Estilos personalizados.css
  9. Hacer clic OK.

Una vez que haya hecho esto, debería terminar con un panel de vista previa que se parece mucho a este artículo.

Nuevamente, obtuve estos valores usando la herramienta Inspeccionar elemento de mi navegador en MUO, pero querrá encontrar los valores para su propio sitio web de destino.

Editor de temas

El tema predeterminado de VSCode viene en oscuro y claro, con versiones de alto contraste de cada uno. Pero como cualquier buen editor de código, hay una tonelada de excelentes temas de terceros disponibles.

Si prefiere el aspecto de un procesador de textos al de un editor de código, le recomiendo el tema de Office de huacat:

Si prefiere un editor de código, los temas comunes como Drácula, Gruvbox, Material (vea la captura de pantalla a continuación) y Nord están disponibles en el mercado de extensiones.

Para instalar un tema nuevo:

  1. Haga clic en el icono de engranaje en la esquina inferior izquierda de la interfaz.
  2. Haga clic en Extensiones.
  3. Busque cualquiera de los temas mencionados anteriormente o simplemente filtre la categoría para temas y explore lo que está disponible.

¿Es VSCode el editor de rebajas definitivo?

Entonces, ¿es VSCode el mejor editor de Markdown para contenido web? Fuera de la caja, probablemente no. Pero es tan extensible como cualquier cosa podría ser.

Los contadores de palabras, los correctores ortográficos, Copy Markdown como HTML, las personalizaciones de vista previa y los temas solo rascan la superficie. Hay un ecosistema lleno de extensiones disponibles para VSCode, y eres libre de personalizarlo.