构建一个带有实时预览的简单 Markdown 编辑器

初级

在本项目中,我们将创建一个简单的基于 Web 的 Markdown 编辑器,该编辑器在你输入时提供实时的 HTML 预览。使用 Ace Editor、`marked` 和 `highlight.js` 等库,你将开发一个直观的编辑器,不仅可以编写 Markdown,还可以跨浏览器会话保存数据,并在预览中高亮显示代码片段。

CSSHTMLJavaScript

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,我们将创建一个简单的基于网页的 Markdown 编辑器,它能在你输入时提供实时 HTML 预览。通过使用 Ace Editor、markedhighlight.js 等库,你将开发一个直观的编辑器,它不仅允许你用 Markdown 进行编写,还能在不同浏览器会话间保存数据,并在预览中突出显示代码片段。

👀 预览

Markdown 编辑器实时预览

🎯 任务

在这个项目中,你将学习:

  • 如何为编辑器和预览器设置 HTML 结构
  • 如何对编辑器和预览器进行样式设计以获得愉悦的用户体验
  • 如何实现编辑器初始化逻辑
  • 如何将 Markdown 解析为 HTML 并在预览器中显示
  • 如何在编辑器和预览器之间同步滚动

🏆 成果

完成这个项目后,你将能够:

  • 开发一个具有实时 HTML 预览功能的基于网页的 Markdown 编辑器
  • 利用 Ace Editor、markedhighlight.js 等库增强编辑器的功能
  • 实现跨浏览器会话的数据持久化
  • 在 Markdown 预览中提供代码语法高亮显示

教师

labby

Labby

Labby is the LabEx teacher.