forked from lab/libre-marker
85 lines
3.5 KiB
Markdown
85 lines
3.5 KiB
Markdown
# 🚀 MarkDawnMaker: Visor y Editor Markdown Futurista
|
|
|
|
Bienvenido a **MarkDawnMaker**, una aplicación web moderna y visualmente atractiva para editar, visualizar y gestionar archivos Markdown (`.md`). Este proyecto está diseñado para ofrecer una experiencia intuitiva, rápida y elegante, ideal para cualquier persona que trabaje con Markdown.
|
|
|
|
## ✨ Características principales
|
|
|
|
- **Editor Markdown en tiempo real**: Escribe tu contenido en Markdown y observa la vista previa instantáneamente.
|
|
- **Vista previa instantánea**: El panel de vista previa muestra el resultado renderizado de tu Markdown al momento.
|
|
- **Carga de archivos `.md`**: Sube archivos Markdown desde tu dispositivo y edítalos directamente en el navegador.
|
|
- **Descarga de archivos**: Guarda tu trabajo como archivo `.md` con un solo clic.
|
|
- **Modo de visualización dual**: Alterna entre modo dividido (editor + vista previa) y solo vista previa.
|
|
- **Limpieza rápida**: Borra todo el contenido del editor fácilmente.
|
|
- **Diseño futurista y oscuro**: Interfaz moderna con fondo animado de estrellas y efectos visuales atractivos.
|
|
- **Soporte para dispositivos móviles**: Diseño responsivo que se adapta a cualquier pantalla.
|
|
|
|
## 🖥️ ¿Cómo usarlo?
|
|
|
|
1. **Escribe Markdown**: Utiliza el área de texto para escribir o pegar tu contenido Markdown.
|
|
2. **Carga un archivo**: Haz clic en "📁 Cargar archivo .md" para importar un archivo Markdown desde tu dispositivo.
|
|
3. **Descarga tu trabajo**: Haz clic en "💾 Descargar .md" para guardar el contenido actual como archivo Markdown.
|
|
4. **Limpia el editor**: Usa el botón "🗑️ Limpiar" para borrar todo el contenido del editor.
|
|
5. **Cambia el modo de visualización**:
|
|
- "✂️ Dividido": Muestra editor y vista previa lado a lado.
|
|
- "👁️ Vista previa": Muestra solo la vista previa renderizada.
|
|
|
|
## 🎨 Interfaz y experiencia visual
|
|
|
|
- **Fondo animado**: Un canvas con partículas de estrellas en movimiento para una experiencia inmersiva.
|
|
- **Colores y sombras**: Paleta de colores oscuros y neón, con gradientes y efectos de sombra.
|
|
- **Paneles diferenciados**: Editor y vista previa claramente separados para facilitar el trabajo.
|
|
|
|
## 📦 Tecnologías utilizadas
|
|
|
|
- **HTML5, CSS3**: Estructura y estilos modernos y responsivos.
|
|
- **JavaScript**: Lógica de la aplicación y manejo de eventos.
|
|
- **[marked.js](https://github.com/markedjs/marked)**: Librería para parsear y renderizar Markdown en el navegador.
|
|
|
|
## 📝 Ejemplo de uso
|
|
|
|
```markdown
|
|
# Título principal
|
|
|
|
Puedes usar **negrita**, *cursiva*, y más.
|
|
|
|
- Listas
|
|
- [Enlaces](https://example.com)
|
|
- Código:
|
|
|
|
```javascript
|
|
console.log('¡Hola Mundo!');
|
|
```
|
|
|
|
> Citas inspiradoras
|
|
```
|
|
|
|
## 🚦 Estado de las funciones
|
|
|
|
| Característica | Estado |
|
|
|---------------|--------|
|
|
| Editor | ✅ Activo |
|
|
| Preview | ✅ Activo |
|
|
| Descarga | ✅ Activo |
|
|
| Carga | ✅ Activo |
|
|
| Limpieza | ✅ Activo |
|
|
| Modo vista | ✅ Activo |
|
|
|
|
## ❓ Preguntas frecuentes
|
|
|
|
**¿Se guarda mi trabajo automáticamente?**
|
|
> No, debes descargar el archivo manualmente para guardarlo en tu dispositivo.
|
|
|
|
**¿Puedo cargar archivos grandes?**
|
|
> Sí, pero el rendimiento puede variar según el tamaño y tu navegador.
|
|
|
|
**¿Funciona en móviles?**
|
|
> Sí, la interfaz es responsiva y se adapta a pantallas pequeñas.
|
|
|
|
## 🛡️ Licencia
|
|
|
|
Este proyecto es de código abierto y puedes modificarlo o adaptarlo según tus necesidades.
|
|
|
|
---
|
|
|
|
¡Disfruta creando y visualizando Markdown con estilo futurista! ✨
|