Vista previa en tu editor

Cuando escribes tus páginas en un repositorio sincronizado con GitHub, la extensión DeveloperHub Preview muestra cada página tal como la verán tus lectores, justo al lado del archivo que estás editando. Se actualiza mientras escribes, antes de guardar. Está disponible para VS Code y para los IDE de JetBrains, como IntelliJ IDEA, PhpStorm y WebStorm.

Instalar la extensión

• VS Code: abre la vista de Extensiones, busca DeveloperHub Preview y haz clic en Install. También puedes instalarla desde el Visual Studio Marketplace.

• IDE de JetBrains: abre Settings → Plugins → Marketplace, busca DeveloperHub Preview y haz clic en Install.

Abrir la vista previa

Abre tu repositorio sincronizado y luego abre una página de él (cualquier archivo .md dentro de la carpeta que contiene developerhub.yaml).

• VS Code: haz clic en el icono DeveloperHub de la barra de título del editor, o ejecuta Open DeveloperHub Preview to the Side desde la paleta de comandos. La vista previa sigue la página que abras.

• IDE de JetBrains: la vista previa se abre por sí sola junto a la página. Los botones de la parte superior derecha del editor alternan entre solo el editor, ambos y solo la vista previa.

Haz clic en un enlace de la vista previa para abrir la página a la que apunta.

En las páginas DeveloperHub, esta vista previa sustituye a la vista previa de Markdown integrada, que muestra las etiquetas de Markdoc como texto sin formato. Los demás archivos Markdown conservan la vista previa de Markdown.

Problemas en tu Markdoc

Cuando una etiqueta no se muestra como esperabas, la vista previa la enumera sobre la página y subraya la línea en el editor. En VS Code también aparece en el panel Problems. Esto detecta una etiqueta mal escrita y una etiqueta que nunca se cierra, lo cual puede ocultar todo lo que viene después.

Lo que omite la vista previa

La vista previa muestra la página por sí sola, sin la configuración de tu proyecto:

• Las variables muestran su nombre en lugar de su valor.

• Los bloques sincronizados muestran su ID en lugar de su contenido.

• El contenido solo para ciertas audiencias se muestra a todos, dentro de un recuadro discontinuo.

• Las incrustaciones de código de GitHub muestran un enlace al archivo en lugar de su código.

• Los scripts de los bloques HTML no se ejecutan.

• Las fuentes y los colores son los de un proyecto nuevo de DeveloperHub, no los de tu tema.

Conviene saber

• La vista previa está desactivada en las carpetas en las que no has confiado: el modo restringido de VS Code o un proyecto no confiable en un IDE de JetBrains.

• Necesita conexión a internet, ya que carga el lector de DeveloperHub cada vez que se abre.

• Tu página no se sube ni se almacena en ningún sitio. Se renderiza dentro de tu editor.