日 | 一 | 二 | 三 | 四 | 五 | 六 |
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
[复位日记]
网站统计
·今日访问 : 35
·页面点击 : 36
·当前在线 : 12
2024年9月26日 星期四[阅读 255]
代码非入侵式高亮 helight 最初的设计有些复杂:在客户div+pre的基础上再追加一个div,该div用P标签装载和pre各行差不多一样的代码,然后让P标签的伪元素显示行号。这个做法在计算机浏览器下没有什么不妥,不过由于渲染机制问题,在带宽较低的环境下渲染过程有点别扭,在小型设备下还常出现高度不一致的现象——这会导致行号对不上代码。
为此,下决心做出修正。
首先更改机制,不再等待window.onload或document.onchange,前者虽可保证最终渲染完美但速度偏慢,后者在小设备显示器中“露马脚”、行号不对。具体变换机制的方法:一为剥离CSS为独立资源,以该资源的加载决定开始渲染的时机,加行号在先、着色在后;二为去掉额外的div,转而将pre的代码每一行以div的方式加载在客户div里,并隐藏pre,对pre只读取不做其他操作,彻底解决行号混乱问题,也不用在关切div、pre的宽高问题。
晚饭后花点时间做做,经测试效果可以接受。
本站的helight代码在线生成器仍然使用最初的版本,在本站它的运行没有问题,但生成的代码使用的插件资源是新修正的版本。
评论列表: [ 1 条 ]
1 # 悄然[2024-10-1 20:16] 貌似今天又升级了一下
发表评论: