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,
markedehighlight.jspara 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>
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.
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 || "");
}
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;
}
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);
});
}
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);
});
}
Executando o Projeto
- Abra
index.htmlem um navegador web.
- Para visualizar e testar seu editor de markdown.
- O efeito da página é o seguinte:
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!
