Editor de Markdown | Editor de Markdown basado en la web con vista previa en vivo

Introducción

En este proyecto, crearemos un editor de Markdown simple basado en la web que ofrece una vista previa en vivo de HTML mientras escribes. Utilizando bibliotecas como Ace Editor, marked y highlight.js, desarrollarás un editor intuitivo que no solo permite escribir en Markdown, sino que también guarda datos entre sesiones del navegador y resalta los fragmentos de código en la vista previa.

👀 Vista previa

Vista previa en vivo del editor de Markdown

🎯 Tareas

En este proyecto, aprenderás:

Cómo configurar la estructura HTML para el editor y el visor
Cómo dar estilo al editor y el visor para una experiencia de usuario agradable
Cómo implementar la lógica de inicialización del editor
Cómo analizar Markdown a HTML y mostrarlo en el visor
Cómo sincronizar el desplazamiento entre el editor y el visor

🏆 Logros

Después de completar este proyecto, podrás:

Desarrollar un editor de Markdown basado en la web con vista previa en vivo de HTML
Utilizar bibliotecas como Ace Editor, marked y highlight.js para mejorar la funcionalidad del editor
Implementar la persistencia de datos entre sesiones del navegador
Proporcionar resaltado de sintaxis de código en la vista previa de Markdown

Configurar la estructura HTML

Requisitos:

Conocimiento de las etiquetas HTML básicas.

Funcionalidad:

Sentar las bases para el editor y el visor.

En index.html, configure una estructura HTML básica para el editor y el visor. Incluya espacio para el editor y el panel de vista previa.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>markdown editor</title>

    <!-- Importar archivos CSS -->
    <link rel="stylesheet" href="libs/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/default.min.css" />
    <link rel="stylesheet" href="libs/highlightjs/monokai_sublime.min.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <!-- Div del editor de markdown -->
        <div class="col-md-6" id="md-editor"></div>
        <!-- Div de la caja de vista previa de markdown -->
        <div class="col-md-6" id="md-viewer"></div>
      </div>
    </div>
    <!-- Importar archivos JavaScript -->
    <script src="libs/jquery.min.js"></script>
    <script src="libs/bootstrap/js/bootstrap.min.js"></script>
    <script src="libs/ace/ace.js"></script>
    <script src="libs/marked.min.js"></script>
    <script src="libs/highlightjs/highlight.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

Dar estilo al editor y al visor

Requisitos:

Conocimientos básicos de CSS.

Funcionalidad:

Dar estilo al editor y al visor para una agradable experiencia de usuario.

Inserta los estilos proporcionados en style.css. Esto garantizará que tanto el editor como el visor estén correctamente estilados y ocupen la mitad de la pantalla cada uno.

/* style.css */

/* Área de edición */
#md-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 16px;
}

/* Área de vista previa */
#md-viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow-y: scroll;
}

Este CSS asegura que el editor y el visor ocupen la mitad de la pantalla cada uno y se sitúen uno al lado del otro.

Implementar la inicialización del editor

Requisitos:

Comprensión básica de JavaScript.

Funcionalidad:

Configurar el editor Ace con los ajustes deseados.

Comience el archivo main.js con la lógica de inicialización del editor.

/* main.js */

/**
 * Inicializar el editor
 *
 */
function initEditor() {
  // Inicializar el editor
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Establecer el estilo del tema
  editor.getSession().setMode("ace/mode/markdown"); // Establecer el modo del editor
  editor.getSession().setTabSize(4); // Establecer la tabulación en 4 espacios
  editor.getSession().setUseWrapMode(true); // Habilitar el salto de línea automático

  // Cargar datos desde el almacenamiento local
  editor.setValue(localStorage.localData || "");
}

Implementar el análisis de Markdown

Requisitos:

Conocimiento de JavaScript y jQuery.

Funcionalidad:

Convertir Markdown a HTML.
Mostrar el HTML en el visor.

/**
 * Analizar markdown
 *
 * @params {object} editor - Instancia del editor
 * @return {object} - Caja de vista previa
 */
function parseMarkdown(editor) {
  var viewer = $("#md-viewer"); // Caja de vista previa del documento
  var data = editor.getValue(); // Obtener los datos del editor

  // Guardar los datos en el almacenamiento local
  localStorage.localData = data;
  // Analizar markdown
  data = marked(data);
  viewer.html(data);

  // Resaltar el código en el documento Markdown
  $("pre > code", viewer).each(function () {
    hljs.highlightBlock(this);
  });

  // Devolver el visor
  return viewer;
}

Sincronizar el desplazamiento entre el editor y el visor

Requisitos:

Comprensión de los eventos de JavaScript.

Funcionalidad:

Sincronizar el desplazamiento del editor y el visor.

/*
 * Controlar la barra de desplazamiento
 * Sincronizar el desplazamiento entre el editor y la caja de vista previa
 *
 * @params {object} editor - Instancia del editor
 * @params {object} viewer - Caja de vista previa
 */
function fixScrollBar(editor, viewer) {
  var session = editor.getSession();

  // Desplazarse a la primera línea por defecto
  session.setScrollTop(0);

  // Vincular el evento de desplazamiento al editor
  session.on("changeScrollTop", function () {
    var sTop = session.getScrollTop();
    // Establecer la barra de desplazamiento para la caja de vista previa
    viewer.scrollTop(sTop);
  });

  // Establecer el evento de desplazamiento para la caja de vista previa
  viewer.on("scroll", function () {
    var sTop = viewer.scrollTop();
    // Establecer la barra de desplazamiento para el editor
    session.setScrollTop(sTop);
  });
}

Integrar todas las funciones e inicializar el editor

Requisitos:

Dominio de la llamada a funciones en JavaScript.

Funcionalidad:

Combinar todos los pasos anteriores en un código unified.
Inicializar el editor y aplicar todas las funcionalidades.

/* main.js */

initEditor();

/**
 * Inicializar el editor
 *
 */
function initEditor() {
  // Inicializar el editor
  var editor = ace.edit("md-editor");

  editor.setTheme("ace/theme/monokai"); // Establecer el estilo del tema
  editor.getSession().setMode("ace/mode/markdown"); // Establecer el modo del editor
  editor.getSession().setTabSize(4); // Establecer la tabulación en 4 espacios
  editor.getSession().setUseWrapMode(true); // Habilitar el salto de línea automático

  // Cargar datos desde el almacenamiento local
  editor.setValue(localStorage.localData || "");

  // Analizar los datos cargados desde el almacenamiento local
  var viewer = parseMarkdown(editor);
  // Controlar la barra de desplazamiento
  fixScrollBar(editor, viewer);

  // Análisis en tiempo real de markdown
  editor.getSession().on("change", function (e) {
    parseMarkdown(editor);
  });
}

Ejecutando el proyecto

Abra index.html en un navegador web.
Para ver y probar su editor de markdown.
El efecto de la página es el siguiente:

Resumen

¡Felicidades! Acabas de crear un editor de Markdown basado en la web con funcionalidad de vista previa en vivo. Ahora puedes escribir contenido Markdown, ver su representación HTML en vivo e incluso resaltar fragmentos de código. Recuerda que el contenido que escribas persistirá a través de las sesiones del navegador gracias a localStorage. ¡Que disfrutes de la codificación!

Desarrollar un editor de Markdown con vista previa en vivo

Introducción

👀 Vista previa

🎯 Tareas

🏆 Logros

Configurar la estructura HTML

Dar estilo al editor y al visor

Implementar la inicialización del editor

Implementar el análisis de Markdown

Sincronizar el desplazamiento entre el editor y el visor

Integrar todas las funciones e inicializar el editor

Ejecutando el proyecto

Resumen