markdown一边写一边预览_markdown预览效果优化,差点哭出声的艰辛历程

本文讲述了作者在实现Markdown编辑器实时预览功能时遇到的挑战和解决方案,包括尝试不同的方法如处理BR、滚动同步、计算高度等。最终通过监听滚动事件和回车键,动态调整预览区域的padding-bottom值,成功实现了预览效果。过程中作者强调了失败的价值和坚持的重要性。
摘要由CSDN通过智能技术生成

其实要实现的效果很简单就是想写文章的时候能即时预览效果,但是自带的会出现看不到的情况,且回车也无法改变这种现象。

熬了好多个夜晚,失败了无数次,终于有点效果了。具体细节就不说了,说说使用过的方法。tip:就算是失败我努力去尝试了很多种方法,这个过程本身也是一种学习,也能锻炼思维能力和解决问题的能力。失败不可怕,最可怕的是还没有去尝试就觉得自己不行。好几次都想放弃,但是想到一句话:我那么勇敢,你怎么舍得让我输。就继续了

尝试过的方法简单说一下(也许看着不多,但是这期间不断的思考新方法,又不断的被打脸,只有自己能体会是多么想砸鼠标):

1:让br在预览中起效果,失败

2:滚动事件,同步高度失败(预览的高度通常比编写markdown语法高,所以同步高度并不科学)

3:回车键插入br失败(会被重写,渲染一遍,这种方法其实也是可行的,需要修改源码,当时觉得修改源码很麻烦就像另外的方法了)

4:根据行号计算高度失败,当时想到这个方法觉得自己思维真的还不错,这样高度就可以动态的来了

但是呢,根据行号计算其实可能计算的高度比实际高度还低所以会出现两个滚动条,在实践的时候发现也不是太科学

5:计算空格数,然后在原来内容的高度上加上空格数*行高,哈哈哈,每次想到一个新方法都觉得自己想法真多,但是每次都会被泼冷水

差点哭出声。这种方法其实也是比较科学可行的,主要是原来内容的

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值