前端实现markdown编辑器

最终效果如图所示

在线测试地址: https://fangyuanxiaozhan.com/demo/md2html

实现思路

• 第一步: 获取markdown开源库showdown

• showdown的Github地址: https://github.com/showdownjs/showdown
• showdown的cdn:https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js

第二步: 获取markdown样式

推荐李笑来老师的markdonw主题: https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2

• 将css插入到页面中即可

如果你对css的美观度很有追求, 可以试试下面几款

• 少数派主题: https://cdn.sspai.com/sspai.css
• Mweb主题: https://cdn.sspai.com/MWeb.css
• Github主题: https://github.com/sindresorhus/github-markdown-css
• typora主题合集下载: https://theme.typora.io/

实现源码:

在线地址(建议pc打开): https://fangyuanxiaozhan.com/demo/md2html

    
    
    



    
Markdown转换为HTML的Demo
    
    
    
    

        
    

小结:

• 记得接触, 是因为的markdown编辑器很好用
• 实现一个简单的markdown编辑器并不是一件难事, 把体验做好确是非常不容易的
• 希望能把markdown编辑器的体验, 越做越好