Cómo cambiar el estilo de la vista previa de Markdown en VSCode

Cambiar los estilos del código Markdown en VSCode

En primer lugar vamos a comenzar con la parte más sencilla, es decir, los pasos para personalizar la apariencia del código Markdown en VSCode:

Abre un fichero .md con contenido en VSCode.
Abre el inspector de tokens de VSCode. Para ello, con tu fichero Markdown abierto, pulsa Control + P, escribe >Developer: Inspect Editor Tokens and Scopes y pulsa Intro.
Apunta el identificador de los elementos a personalizar. Con el inspector de tokens activado haz click en los elementos que quieres modificar y apunta el primer selector de la sección textmate scopes.
Por ejemplo, para personalizar el estilo de las negritas utilizaremos y apuntaremos el selector markup.bold.markdown:
Ejemplo selector para cambiar estilos codigo Markdown en VSCode
Abre la configuración JSON de VSCode. Para ello pulsa Control + P, escribe > Preferences: Open User Settings (JSON) y haz click en la única opción que aparece en el desplegable. Se abrirá el archivo settings.json, mantenlo localizado porque será el que utilizaremos para personalizar el estilo del código Markdown.

Modifica el archivo settings.json y añade un bloque de código como el siguiente ejemplo donde, dentro de la sección textMateRules, debemos añadir tantos bloques como elementos queramos personalizar:

// *************************************************************************
// *                MARKDOWN
// *************************************************************************    
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "markup.bold.markdown",
            "settings": {
                "foreground": "#ff0000",
            }
        },
        ... ETC, OTHER RULES HERE
    ]
},

A continuación tienes el ejemplo completo para modificar los estilos del código Markdown en VSCode que yo utilizo:

// *************************************************************************
// *                MARKDOWN
// *************************************************************************    
"editor.tokenColorCustomizations": {
    "textMateRules": [
        // HEADINGS
        {
            "scope": "markup.heading.markdown",
            "settings": {
                "fontStyle": "bold underline",
                "foreground": "#0091bd"
            }
        },
        // BOLD
        {
            "scope": "markup.bold.markdown",
            "settings": {
                "fontStyle": "bold",
                "foreground": "#bd0000"
            }
        },
        // CODE INLINE
        {
            "scope": "markup.inline.raw.string.markdown",
            "settings": {
                "fontStyle": "bold",
                "foreground": "#00bd00"
            }
        },
        // CODE NOT INLINE
        {
            "scope": "markup.fenced_code.block.markdown",
            "settings": {
                "fontStyle": "bold",
                "foreground": "#00bd00"
            }
        },
        // LINK TEXT
        {
            "scope": "string.other.link.title.markdown",
            "settings": {
                "fontStyle": "bold",
                "foreground": "#bdba00"
            }
        },
        // IMAGE TEXT
        {
            "scope": "string.other.link.description.markdown",
            "settings": {
                "fontStyle": "bold",
                "foreground": "#bdba00"
            }
        }	
    ]
}

Y este es el resultado de personalizar el estilo en VSCode para ficheros Markdown antes y después:

De manera adicional a lo siguiente me gustaría comentar respecto a este apartado algunos puntos importantes a tener en cuenta:

Esta configuración es multidispositivo, es decir, VSCode es capaz de sincronizar en la nube los cambios para que los tengas disponibles en otros ordenadores.
Para que VSCode pueda sincronizar los cambios del archivo settings.json es necesario que vayas al icono del usuario que aparece abajo a la izquierda, inicies sesión con tu cuenta de Microsoft y te asegures de que la opción Settings Sync está en On:
Como habilitar sincronizacion en la nube de settings json
No se puede cambiar el color de fondo ni otras características avanzadas a través de este método. Si necesitas una personalización más profunda deberás utilizar el plugin highlight y utilizar el siguiente tutorial de personalización avanzada para Markdown y VSCode como referencia.
En lo personal prefiero no instalar muchos plugins y mantener el editor ligero y eficiente.
No siempre hay que seleccionar el primer selector dentro de la sección textmate scopes, puede ser cualquiera de ellos pero ten en cuenta que, cuanto más abajo esté el selector dentro de la sección, más genérico será y a más elementos afectará.
Lo anterior significa que, si utilizas un selector muy genérico, puede aplicarse a otros tipos de archivo como, por ejemplo, archivos de código C#.
Para evitar que los cambios se propagen a sitios donde no deben te recomiendo que te asegures de que los selectores terminan en .markdown para que sean lo más específicos posible.
Si quieres cerrar el inspector de tokens de VSCode (dado que es bastante molesto) solo hay que seguir los mismos pasos que utilizamos para abrirlo.

Cambiar los estilos de la vista previa de Markdown en VSCode

Ahora iremos a la parte que es un poco más compleja, modificar el estilo de la vista previa de Markdown en VSCode. Ten en cuenta que existen dos métodos para hacerlo:

Método 1, a través de un fichero de configuración local. La desventaja reside en que este método no es válido para múltiples workspaces ni para múltiples dispositivos, solo tendrás la personalización en el workspace y ordenador donde lo realices.
Método 2, a través de un fichero remoto alojado en GitHub. La ventaja de este método es que podrás tener disponible la modificación en distintos ordenadores y workspaces sin tener que repetir el cambio en todos ellos. La desventaja es que es un proceso un poco más largo y complejo.

Nota: un Workspace es la carpeta o proyecto que tienes abierto con VSCode a través del botón Open Folder:

Con fichero de configuración local

La ventaja de este método es que es un proceso fácil, solo hay que crear un archivo en el workspace en el que te encuentras.
La desventaja de este método reside en que no vale para varios workspaces ni varios ordenadores, todos los cambios que realices en un workspace deberás replicarlos manualmente en todos los workspaces y ordenadores que utilices.
Los pasos para modificar los estilos de la vista previa en VSCode de Markdown son:

Crea el fichero de estilos en la carpeta raíz de tu workspace o proyecto con el nombre markdownstyles.css:
Estilos css para preview de Markdown en VSCode

Referencia el fichero de estilos en la configuración JSON de VSCode. Utiliza el comando Control + P y escribe > Preferences: Open User Settings (JSON). Introduce la siguiente línea junto a los cambios que hicimos en los apartados anteriores:

// *************************************************************************
// *                MARKDOWN
// *************************************************************************
// Preview markdown
"markdown.styles": ["markdownstyles.css"],

Abre el preview Markdown. Para ello, sobre el fichero Markdown, botón derecho del ratón y pulsamos en Open preview.
Abre el inspector HTML de VSCode para conocer las etiquetas de los elementos a personalizar, para ello pulsa Control + P y escribe >Developer: Toggle Developer Tools.
Este inspector es el mismo que el del navegador Chrome y, por lo tanto, funciona exactamente igual que si estuviéramos dandole estilos a una página web con HTML y CSS.
Por ejemplo, para conocer qué etiqueta utilizan los encabezados, solo tenemos que utilizar la herramienta de selección ubicada en la parte superior izquierda del inspector y hacer click en el elemento que queramos analizar, en este caso podemos observar que la etiqueta HTML de uno de los encabezados es un H2:
Inspector HTML de VSCode para Markdown

Rellena el archivo markdownstyles.css con los estilos a aplicar al preview. Por ejemplo podemos introducir las siguientes líneas:

/* GENERAL */
body{
    font-family: "Roboto Mono", monospace;
    font-size: 16px;
}

/* HEADINGS */
h1 {
    background-color: #0091bd;
    color: white;
}

h2{
    background-color: #bfe3ee;
    color: black;
}

Verifica que los cambios se han aplicado en la preview de Markdown.

A continuación os adjunto un ejemplo completo de estilos CSS para la preview de Markdown en VSCode:

/* GENERAL */
body{
    font-family: "Roboto Mono", monospace;
    font-size: 16px;
}

/* HEADINGS */
h1 {
    background-color: #0091bd;
    color: white;
}

h2{
    background-color: #bfe3ee;
    color: black;
}

h3{
    background-color: #ffffff;
    color: gray;
}

/* LISTAS BULLET */
::marker{
    color:#0091bd;
}

/* BOLD */
strong {
    color: #bd0000;
    font-weight: bolder;
}

/* CODE */
pre code, code{
    color: #00bd00;
}

/* LINKS */
a, a:hover, a:visited{
    color:#bdba00;
}

Y aquí tenéis el resultado de personalizar los estilos Markdown en la preview de VSCode antes y después de los cambios:

Con fichero de configuración remoto

La ventaja de este método consiste en que es multidispositivo y válido para múltiples workspaces, podrás tener tus cambios de manera totalmente automática en todos ellos siempre y cuando tengas activada la opción Settings Sync como hemos visto anteriormente.
La desventaja de este método es que es un proceso un poco más largo, requiere subir el fichero a GitHub y referenciarlo desde las opciones de configuración.
Ten en cuenta que partiremos del ejemplo de configutación con fichero local, por lo tanto es obligatorio que sigas y apliques todos los pasos del apartado anterior.

Los pasos para cambiar el estilo de la vista previa de Markdown en VSCode son:

Crea un nuevo repositorio en GitHub, dale un nombre descriptivo, selecciona que sea público y activa la opción de fichero README.md para simplificar los pasos posteriores.
Añade el fichero de estilos al repositorio, para ello en la página principal del repositorio selecciona Add File, Create new file. Pega el contenido css anterior y dale un nombre con extensión .css, por ejemplo, MarkdownPreviewStyle.css.
Publica el proyecto en GitHub con GitHub Pages. Ve al apartado Settings del proyecto, localiza la sección Pages y, dentro de ésta selecciona para Source el valor Deploy from a branch y para Branch los valores main y root. Pulsa el botón Save.
Publicar GitHub Pages para Markdown preview styles
Espera a que se publique, puedes ver el estado de publicación en la sección de Actions.
Accede a la página publicada a través de la sección Deployments en la parte inferior derecha de la página principal del proyecto. Dentro de este apartado tienes disponible la url de la página que acabas de publicar:
GitHub Pages publicaciones o deployments
Copia el enlace del fichero de estilos, para lo cual simplemente tienes que añadir a la url anterior el nombre del archivo que creaste. En nuestro ejemplo la url de la página publicada es https://codearco.github.io/MarkdownPreviewStyle/ y la url del fichero css es https://codearco.github.io/MarkdownPreviewStyle/MarkdownPreviewStyle.css, esta última es la que utilizaremos más adelante.
Verifica que los estilos son accesibles, es decir, verifica que la url anterior te devuelve el contenido del css:
Verificar estilos accesibles para Markdown Preview
Cambia la referencia local por la remota en settings.json. Simplemente tienes que cambiar la línea "markdown.styles": ["markdownstyles.css"] por la línea "markdown.styles": ["https://codearco.github.io/MarkdownPreviewStyle/MarkdownPreviewStyle.css"],.
Elimina el archivo markdownstyles.css de tu workspace ya que no lo vamos a necesitar más.
Verifica que los estilos en la preview de Markdown se han aplicado.
Comprueba que la solución es multidispositivo y multiworkspace. Crea un fichero Markdown en un lugar completamente distinto a tu workspace o proyecto, abre su vista previa y comprueba que los estilos están aplicados. Si quieres probar que es multidispositivo abre el fichero en otro ordenador distinto en el que tengas tu configuración sincronizada tal y como hicimos antes.