Editor Markdown responsivo desenvolvido para criar, editar e visualizar documentos diretamente no navegador, com ferramentas de formatação, salvamento automático e suporte aos modos claro e escuro.
O Markdown Studio é uma aplicação web desenvolvida para tornar a criação de documentos Markdown mais simples e produtiva.
A aplicação permite escrever e formatar conteúdos enquanto acompanha o resultado instantaneamente através da pré-visualização em tempo real.
Todo o projeto funciona diretamente no navegador, utilizando HTML, CSS e JavaScript, sem necessidade de cadastro ou servidor próprio.
- ✍️ Editor Markdown com pré-visualização em tempo real
- 🛠️ Barra de ferramentas para formatação
- 📰 Títulos, negrito, itálico e tachado
- 📋 Listas simples, numeradas e listas de tarefas
- 🔗 Inserção de links e imagens
- 💬 Citações e linhas horizontais
- 💻 Código em linha e blocos de código
- ↩️ Continuação automática de listas
- 📊 Contador de palavras, caracteres e linhas
- 💾 Salvamento automático com LocalStorage
- 📂 Importação de arquivos
.md,.markdowne.txt - 📥 Exportação de documentos em
.md - 📋 Cópia do conteúdo para a área de transferência
- 📝 Nome de arquivo personalizável
- ☀️ Modo claro
- 🌙 Modo escuro
- ⌨️ Atalhos de teclado
- 📱 Interface responsiva
- ♿ Recursos básicos de acessibilidade
- 🛡️ Sanitização segura do HTML renderizado
| Tecnologia | Utilização |
|---|---|
| HTML5 | Estrutura da aplicação |
| CSS3 | Interface, temas e responsividade |
| JavaScript | Lógica e interatividade |
| Marked | Interpretação do Markdown |
| DOMPurify | Sanitização do HTML |
| LocalStorage API | Salvamento automático |
| Clipboard API | Cópia de conteúdo |
| File API | Importação de arquivos |
As bibliotecas Marked e DOMPurify são carregadas via CDN e utilizadas para interpretação e sanitização segura do conteúdo Markdown.
markdown-studio/
│
├── assets/
│ └── favicon.svg
│
├── images/
│ ├── banner.png
│ ├── modo-claro.png
│ └── modo-escuro.png
│
├── index.html
├── styles.css
├── script.js
├── README.md
├── LICENSE
└── .gitignore
| Atalho | Ação |
|---|---|
Ctrl/Cmd + S |
Exportar Markdown |
Ctrl/Cmd + B |
Aplicar negrito |
Ctrl/Cmd + I |
Aplicar itálico |
Ctrl/Cmd + K |
Inserir link |
Tab |
Inserir dois espaços no editor |
- Baixe ou clone este repositório.
- Abra a pasta do projeto no Visual Studio Code.
- Execute utilizando a extensão Live Server ou outro servidor HTTP local.
- Abra o endereço fornecido pelo servidor no navegador.
Também é possível executar o projeto abrindo diretamente o arquivo index.html.
- Crie um repositório no GitHub.
- Envie todos os arquivos mantendo a estrutura original.
- Acesse Settings → Pages.
- Em Build and deployment, selecione Deploy from a branch.
- Escolha a branch
main. - Selecione
/ (root). - Clique em Save.
- Aguarde o GitHub finalizar a publicação.
O conteúdo criado no Markdown Studio permanece armazenado localmente através do LocalStorage do navegador.
Nenhum documento é enviado para um servidor próprio.
Antes da exibição na pré-visualização, o HTML gerado a partir do Markdown é sanitizado utilizando DOMPurify, reduzindo riscos relacionados à inserção de conteúdo HTML malicioso.
Este projeto está distribuído sob a licença MIT.
Consulte o arquivo LICENSE para mais informações.
