Editor Markdown Online | Editor Markdown com Visualização ao Vivo

Introdução

Neste projeto, criaremos um editor Markdown simples baseado na web que oferece uma visualização HTML ao vivo enquanto você digita. Usando bibliotecas como Ace Editor, marked e highlight.js, você desenvolverá um editor intuitivo que não apenas permite escrever em Markdown, mas também salva dados entre sessões do navegador e destaca trechos de código na visualização.

👀 Visualização

🎯 Tarefas

Neste projeto, você aprenderá:

Como configurar a estrutura HTML para o editor e visualizador
Como estilizar o editor e o visualizador para uma experiência de usuário agradável
Como implementar a lógica de inicialização do editor
Como converter Markdown para HTML e exibi-lo no visualizador
Como sincronizar a rolagem entre o editor e o visualizador

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Desenvolver um editor Markdown baseado na web com visualização HTML ao vivo
Utilizar bibliotecas como Ace Editor, marked e highlight.js para aprimorar a funcionalidade do editor
Implementar a persistência de dados entre sessões do navegador
Fornecer realce de sintaxe de código na visualização Markdown

Configurar a Estrutura HTML

Requisitos:

Familiaridade com tags HTML básicas.

Funcionalidade:

Estabelecer a base para o editor e visualizador.

Em index.html, configure uma estrutura HTML básica para o editor e o visualizador. Inclua espaço para o editor e o painel de visualização.

<!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>

    <!-- Import CSS files -->
    <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">
        <!-- markdown editor div -->
        <div class="col-md-6" id="md-editor"></div>
        <!-- markdown preview box div -->
        <div class="col-md-6" id="md-viewer"></div>
      </div>
    </div>
    <!-- Import JavaScript files -->
    <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>

✨ Verificar Solução e Praticar

Estilizar o Editor e o Visualizador

Requisitos:

Conhecimento básico de CSS.

Funcionalidade:

Estilizar o editor e o visualizador para uma experiência de usuário agradável.

Insira os estilos fornecidos em style.css. Isso garantirá que tanto o editor quanto o visualizador sejam estilizados corretamente e ocupem metade da tela cada um.

/* style.css */

/* Editing Area */
#md-editor {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-size: 16px;
}

/* Preview Area */
#md-viewer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  overflow-y: scroll;
}

Este CSS garante que o editor e o visualizador ocupem metade da tela cada um e fiquem lado a lado.

✨ Verificar Solução e Praticar

Implementar a Inicialização do Editor

Requisitos:

Uma compreensão básica de JavaScript.

Funcionalidade:

Configurar o Ace Editor com as configurações desejadas.

Comece o main.js com a lógica de inicialização do editor.

/* main.js */

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

  editor.setTheme("ace/theme/monokai"); // Set theme style
  editor.getSession().setMode("ace/mode/markdown"); // Set editor mode
  editor.getSession().setTabSize(4); // Set Tab to 4 spaces
  editor.getSession().setUseWrapMode(true); // Enable word wrap

  // Load data from local storage
  editor.setValue(localStorage.localData || "");
}

✨ Verificar Solução e Praticar

Implementar a Análise de Markdown

Requisitos:

Familiaridade com JavaScript e jQuery.

Funcionalidade:

Converter Markdown para HTML.
Exibir o HTML no visualizador.

/**
 * Parse markdown
 *
 * @params {object} editor - Editor instance
 * @return {object} - Preview box
 */
function parseMarkdown(editor) {
  var viewer = $("#md-viewer"); // Document preview box
  var data = editor.getValue(); // Get editor data

  // Save data to local storage
  localStorage.localData = data;
  // Parse markdown
  data = marked(data);
  viewer.html(data);

  // Highlight code in markdown document
  $("pre > code", viewer).each(function () {
    hljs.highlightBlock(this);
  });

  // Return viewer
  return viewer;
}

✨ Verificar Solução e Praticar

Sincronizar a Rolagem entre o Editor e o Visualizador

Requisitos:

Compreensão de eventos JavaScript.

Funcionalidade:

Sincronizar a rolagem do editor e do visualizador.

/*
 * Control the scrollbar
 * Synchronize scrolling between the editor and preview box
 *
 * @params {object} editor - Editor instance
 * @params {object} viewer - Preview box
 */
function fixScrollBar(editor, viewer) {
  var session = editor.getSession();

  // Scroll to the first line by default
  session.setScrollTop(0);

  // Bind scroll event to the editor
  session.on("changeScrollTop", function () {
    var sTop = session.getScrollTop();
    // Set the scrollbar for the preview box
    viewer.scrollTop(sTop);
  });

  // Set scroll event for the preview box
  viewer.on("scroll", function () {
    var sTop = viewer.scrollTop();
    // Set the scrollbar for the editor
    session.setScrollTop(sTop);
  });
}

✨ Verificar Solução e Praticar

Integrar Todas as Funções e Inicializar o Editor

Requisitos:

Compreensão da chamada de funções em JavaScript.

Funcionalidade:

Mesclar todas as etapas anteriores em um código unificado.
Inicializar o editor e aplicar todas as funcionalidades.

/* main.js */

initEditor();

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

  editor.setTheme("ace/theme/monokai"); // Set theme style
  editor.getSession().setMode("ace/mode/markdown"); // Set editor mode
  editor.getSession().setTabSize(4); // Set Tab to 4 spaces
  editor.getSession().setUseWrapMode(true); // Enable word wrap

  // Load data from local storage
  editor.setValue(localStorage.localData || "");

  // Parse the data loaded from local storage
  var viewer = parseMarkdown(editor);
  // Control scrollbar
  fixScrollBar(editor, viewer);

  // Real-time markdown parsing
  editor.getSession().on("change", function (e) {
    parseMarkdown(editor);
  });
}

✨ Verificar Solução e Praticar

Executando o Projeto

Abra index.html em um navegador web.
Para visualizar e testar seu editor de markdown.
O efeito da página é o seguinte:

✨ Verificar Solução e Praticar

Resumo

Parabéns! Você acabou de criar um editor de Markdown baseado na web com funcionalidade de visualização ao vivo. Agora você pode escrever conteúdo Markdown, visualizar sua representação HTML ao vivo e até mesmo destacar trechos de código. Lembre-se, o conteúdo que você escreve persistirá entre as sessões do navegador graças ao localStorage. Feliz codificação!

Desenvolva um Editor Markdown com Visualização ao Vivo

Introdução

👀 Visualização

🎯 Tarefas

🏆 Conquistas

Configurar a Estrutura HTML

Estilizar o Editor e o Visualizador

Implementar a Inicialização do Editor

Implementar a Análise de Markdown

Sincronizar a Rolagem entre o Editor e o Visualizador

Integrar Todas as Funções e Inicializar o Editor

Executando o Projeto

Resumo