HTML-CSS-JS 小项目 实时markdown编辑器实验内容

实验内容概述

本实验综合运用多种前端库，完成了一个实时 Markdown 编辑器的开发，并实现了代码高亮效果。这是一个结合了 HTML、CSS 和 JavaScript 的小项目，旨在帮助学习者理解和实践前端开发中的关键技术。

实验效果展示

效果如图所示：

实验知识点

在这个项目中，主要涉及到以下知识点：

  • JavaScript：核心编程语言，用于实现交互和逻辑控制。
  • marked.js：Markdown 解析库，将 Markdown 转换为 HTML。
  • Ace：强大的代码编辑器库，用于构建编辑器界面。
  • highlight.js：用于实现代码块的语法高亮。
实验环境

我们将在 Theia 云 IDE 中完成此实验，并使用其内置的 Preview 或 Mini Browser 进行实时预览。

适合人群

本实验适合有一定前端基础（HTML、CSS、JavaScript）的学习者。

代码获取与准备工作

首先，我们通过以下命令获取实验所需的代码资源：

wget https://labfile.oss-internal.aliyuncs.com/courses/460/editor.zip

接着，我们在 /home/project 目录下创建 editor 文件夹，并在其中创建 index.html、style.css 和 main.js 文件。我们还需要新建 libs 文件夹，用于存放第三方库文件。

以下是各库的下载和配置命令：

  • jQuery 和 Bootstrap
wget https://labfile.oss-internal.aliyuncs.com/courses/460/jquery-1.11.3.min.js
mv jquery-1.11.3.min.js jquery.min.js
wget https://labfile.oss-internal.aliyuncs.com/courses/460/bootstrap-3.3.5-dist.zip
unzip bootstrap-3.3.5-dist.zip
mv bootstrap-3.3.5-dist bootstrap
  • marked
wget https://labfile.oss-internal.aliyuncs.com/courses/460/marked.zip
unzip marked.zip
cp ./marked-master/marked.min.js ./
rm -rf marked-master
  • Ace
wget https://labfile.oss-internal.aliyuncs.com/courses/460/ace.zip
unzip ace.zip
  • highlight.js
wget https://labfile.oss-internal.aliyuncs.com/courses/460/highlightjs.zip
unzip highlightjs.zip
页面布局与样式设计

在 index.html 中定义页面结构，使用 Bootstrap 实现基础布局，代码如下：

<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 元数据与CSS引入 -->
    ...
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6" id="md-editor"></div>
            <div class="col-md-6" id="md-viewer"></div>
        </div>
    </div>
    <!-- JavaScript 引入 -->
    ...
</body>
</html>

在 style.css 中设置基本样式，让编辑器和预览框各占50%宽度：

#md-editor, #md-viewer {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
}
实现Markdown解析与代码高亮

接着，我们在 main.js 中实现初始化编辑器、解析 Markdown 和代码高亮的功能：

function initEditor() {
    var editor = ace.edit("md-editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/markdown");
    editor.getSession().on("change", function () {
        parseMarkdown(editor);
    });
}

function parseMarkdown(editor) {
    var viewer = $("#md-viewer");
    var data = marked(editor.getValue());
    viewer.html(data);
    $("pre > code", viewer).each(function () {
        hljs.highlightBlock(this);
    });
}
实现滚动条同步与数据持久化

为了提升用户体验，我们添加了滚动条同步和数据持久化功能：

function fixScrollBar(editor, viewer) {
    var session = editor.getSession();
    session.on("changeScrollTop", function () {
        viewer.scrollTop(session.getScrollTop());
    });
    viewer.on("scroll", function () {
        session.setScrollTop(viewer.scrollTop());
    });
}

最终的 main.js 整合了所有功能，实现了一个简单但功能完善的 Markdown 编辑器。

实验总结

通过本实验，我们综合运用了多个前端库，搭建了一个实时的 Markdown 编辑器。这个项目不仅提升了对前端技术的理解，也为今后的开发工作打下了坚实的基础。希望大家在完成这个项目后，能够在此基础上继续拓展，创造更多有趣的功能。

 

# 编辑器 # html5 # javascript
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

deck.gl TripsLayer 出租车轨迹动画示例实战：从示例运行到着色器原理

TripsLayer 是 deck.gl 中用于渲染**随时间流动的轨迹动画**（如出租车行程、物流路径、迁徙路线）的核心图层。本文以仓库中的最小独立示例 [examples/website/trips](https://link.gitcode.com/i/1442af8f442f4cff39ff546e050fceb5) 为骨架，带你完成从安装依赖、启动应用、理解曼哈顿出租车数据格式，到深入

avatar 天工造物局

Foundry Anvil 中 eth_simulateV1 的 Blob 交易与 Blob Gas 字段规范化：原理、实现与测试验证

本篇技术指南以 [anvil-simulate-blob-transactions.md](https://link.gitcode.com/i/3d2ebe227262de169335eb290af80da8) 这条 changelog 条目为起点，深入剖析 Foundry Anvil 对 `eth_simulateV1` RPC 返回结果中 blob（EIP-4844）交易与 blob gas

avatar 天工造物局

LMCache CLI 实战：用 `lmcache kvcache clear` 管理运行中服务的 KV Cache 状态

本文是一份针对 LMCache 官方 CLI 命令 `lmcache kvcache` 的完整技术指南。该命令用于在**运行中的 LMCache 服务（MP HTTP server）**上管理 KV cache 状态，当前提供 `clear` 子命令，用于清空 L1（CPU 内存）层中缓存的全部 KV 数据。读完本文，你将掌握该命令的完整参数体系、退出码语义、终端/JSON/静默三种输出模式，并能

avatar 天工造物局