Markdown Preview Side
English | Español
English
A clean and lightweight Markdown preview extension for Visual Studio Code with bidirectional synchronized scrolling.
Features
- Live Preview - See your markdown rendered in real-time as you type
- Bidirectional Scroll Sync - Scroll position is synchronized between editor and preview
- Side-by-side View - Edit markdown and see preview side by side
- VSCode Theme Support - Preview adapts to your current VSCode theme
- Clean Rendering - Uses markdown-it for fast and accurate rendering
- Source Line Mapping - Each element in the preview maps back to its source line
- Duplicate Prevention - Automatically closes duplicate editors when double-clicking files
How It Works
The preview uses data-source-line attributes to map each rendered element back to its corresponding line in the source markdown file. This enables:
- Editor → Preview Sync: When you scroll or move the cursor in the editor, the preview automatically scrolls to show the corresponding content.
- Preview → Editor Sync: When you scroll in the preview, the editor scrolls to show the source of the visible content.
Usage
Opening the Preview
You can open the markdown preview using the Command Palette:
- Press
Ctrl+Shift+P (or Cmd+Shift+P on Mac)
- Type
Markdown Preview: Open Preview to the Side
- Press Enter
The preview also opens automatically when you open a markdown file.
Supported File Extensions
.md.markdown.mdown.mkdn.mkd
Markdown Support
This extension supports standard GitHub Flavored Markdown including:
- Headers
- Bold and Italic
- Links and Images
- Lists (ordered and unordered)
- Code blocks with syntax highlighting
- Blockquotes
- Tables
- Horizontal rules
Requirements
- Visual Studio Code 1.108.0 or higher
Español
Una extensión limpia y ligera para previsualizar Markdown en Visual Studio Code con scroll sincronizado bidireccional.
Características
- Vista Previa en Vivo - Visualiza tu markdown renderizado en tiempo real mientras escribes
- Sincronización de Scroll Bidireccional - La posición del scroll se sincroniza entre el editor y la vista previa
- Vista Lado a Lado - Edita markdown y ve la vista previa lado a lado
- Soporte de Temas de VSCode - La vista previa se adapta a tu tema actual de VSCode
- Renderizado Limpio - Usa markdown-it para un renderizado rápido y preciso
- Mapeo de Líneas de Origen - Cada elemento en la vista previa se mapea a su línea de origen
- Prevención de Duplicados - Cierra automáticamente editores duplicados al hacer doble clic en archivos
Cómo Funciona
La vista previa usa atributos data-source-line para mapear cada elemento renderizado a su línea correspondiente en el archivo markdown fuente. Esto habilita:
- Sincronización Editor → Vista Previa: Cuando haces scroll o mueves el cursor en el editor, la vista previa hace scroll automáticamente para mostrar el contenido correspondiente.
- Sincronización Vista Previa → Editor: Cuando haces scroll en la vista previa, el editor hace scroll para mostrar la fuente del contenido visible.
Uso
Abrir la Vista Previa
Puedes abrir la vista previa de markdown usando la Paleta de Comandos:
- Presiona
Ctrl+Shift+P (o Cmd+Shift+P en Mac)
- Escribe
Markdown Preview: Open Preview to the Side
- Presiona Enter
La vista previa también se abre automáticamente cuando abres un archivo markdown.
Extensiones de Archivo Soportadas
.md.markdown.mdown.mkdn.mkd
Soporte de Markdown
Esta extensión soporta GitHub Flavored Markdown estándar incluyendo:
- Encabezados
- Negrita e Cursiva
- Enlaces e Imágenes
- Listas (ordenadas y desordenadas)
- Bloques de código con resaltado de sintaxis
- Citas
- Tablas
- Reglas horizontales
Requisitos
- Visual Studio Code 1.108.0 o superior
License / Licencia
CUSTOM LICENSE / LICENCIA PERSONALIZADA
Copyright (c) 2025 Fredy Balaguera
Permissions Granted / Permisos Otorgados
This extension may only be / Esta extensión solo puede ser:
- Installed through the official Visual Studio Code Marketplace / Instalada a través del Marketplace oficial de Visual Studio Code
- Used within Visual Studio Code (including VS Code, VS Code for the Web, and GitHub Codespaces) / Usada dentro de Visual Studio Code (incluyendo VS Code, VS Code para la Web, y GitHub Codespaces)
Restrictions / Restricciones
This extension may NOT be / Esta extensión NO puede ser:
- Modified or altered in any form / Modificada o alterada de ninguna forma
- Redistributed outside of the Visual Studio Code Marketplace / Redistribuida fuera del Marketplace de Visual Studio Code
- Sold or included in paid software packages / Vendida o incluida en paquetes de software de pago
- Used in standalone applications or other services / Usada en aplicaciones independientes u otros servicios
- Copied or reused in other projects (commercial or personal) / Copiada o reutilizada en otros proyectos (comerciales o personales)
- Reverse engineered or decompiled / Ingeniería inversa o descompilada
For Licensing Inquiries / Para Consultas de Licencia
For inquiries about licensing or use beyond these terms, contact / Para consultas sobre licencias o uso más allá de estos términos, contacta: contacto@enliveapps.com
