Markdown 是一种轻量级的「标记语言」,目前被越来越多的写作爱好者,撰稿者广泛使用
小编今天分享的项目课程是教你开发一款Markdown编辑器,纯前端技术,简单有趣,前端新手可以用来练手哦~ 我们首先来看看这个项目完成后的效果图吧,和我们用其他的markdown编辑器是一样的效果哦~ 项目效果图: 看完后是不是更想学习,动手去实现这样一个编辑器了呢,接着看~ 项目名称: 【纯前端打造实时Markdown编辑器】 项目简介: 该项目主要应用纯前端知识开发一个实时的Markdown编辑器,当然需要具备一定的HTML、CSS、JavaScript基础知识啦
用到的库(框架)主要有: marked(markdown解析库) Ace(Ace是一个独立的JavaScript编写的代码编辑器) highlight.js(代码高亮库) Bootstrap(CSS框架) 项目开发思路: 1)下载项目开发索要用到的库; 2)写indes.html代码:主要定义两个div,一个作为markdown编辑器,一个作为markdown预览框
3)写style.css代码:设置编辑器和预览框各占50%宽度,编辑器在左边,预览框在右边
4)写 JavaScript代码:主要是初始化编辑器、解析Markdown语法; 关于该项目开发的详细开发步骤,点击最下方的“阅读原文”,即可马上查看哦~ 在线开发环境: 实验楼网站不但提供了该项目的详细开发文档,更有专属的在线开发环境,学习者可以边看文档边动手操作学习
在线开发环境示意图 点击“阅读原文”,即可查看该项目的详细开发文档了~