自己写一个网页版的 Markdown 实时编辑器

·  阅读 1720
原文链接: 1ke.co

准备

需要什么

Markdown“解释器”:便于处理文本输入以及实时预览

Bootstrap模板 :建议的H5界面看起来并不好看,所以使用这个框架美化一下。

Sublime Text:当然也可以是记事本或者其他的文本编辑器,这就是我们编写处理逻辑的工具而已。

简单版

我们可以在桌面上创建一个文件夹,方便我们进行管理。

然后将刚才下载的那个markdown-js/releases解压咯,把里面的js文件放到这个文件夹下面即可。

然后在创建一个html文件即可,大致可以如下:



  
    Type **Markdown** here.
    
 

    
    
  
复制代码

美化版

这个界面确实是不好看,所以加点美化效果。这里使用的是Bootstrap。






  
    Type **Markdown** here.
    
 

    
    
  
复制代码

增强版

这样看着布局什么的也不够好看,所以我就多加了点元素。




    
    Markdown本地练习
    
       
     
     





   嗨,左边输入markdown语句,右边实时预览









    
    
    

复制代码

效果如下:

查看图片

总结

相信大家也看出来了,虽然已经是增强版了,但是这并不是这个小程序的极限。我们可以利用JavaScript以及Bootstrap实现更好看的页面效果。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改