Typecho 的 Markdown 编辑器终于有了滚动跟随

虽然这个效果在很多所见即所得的 Markdown 编辑器里几乎是标配，但是对 Typecho 来说却是十分困难，因为我们的编辑器是基于原生的 textarea 组件，给大家带来了爽快输入响应的同时也牺牲了很多灵活性。

特别是对于自动跟随这种效果来说最重要的一点，需要把左侧输入框的滚动高度和行号与右侧的实时输出效果的 HTML 块一一对应起来，并且自动检测左侧滚动到哪一行了（注意：编辑器是可以行内折行的，也就是软换行），这几乎是不可能做到的，实际上据我所知也没有人做过。因为 textarea 没有方法来检测每一行占用了多少高度。

但很难做到并不代表无法做到，经过几天时间的努力（主要是要达到平滑的效果调试起来太花时间），我为 Typecho 加入了这样一个效果，左右两侧的文本可以滚动对应。

基本原理

要做到平滑滚动其实要涉及的点非常多，包括还需要对 Markdown 的解析库做改造，将它的 HTML 块与代码行对应起来，然后还有间距空白的滚动处理等等。但是最基础的一点，即怎么把 TEXTAREA 里的滚动高度与行数关联起来，却可以用上面这张示意图来展示。

先创建一个特殊的 div，这个 div 的排版和尺寸 CSS 样式完全拷贝自 textarea，这样可以保证他们的字符排版效果一致。然后将字符串按换行符切割，将切割出来的每一行字符串放入刚刚创建的 div 里去，这样就可以得出这一行字符在实际的 textarea 中的占用高度。然后 repeat 这个步骤，我们就可以得到一个由每一行高度组成的数组了。

这样当 textarea 在滚动的时候，我们根据滚动的高度在数组里就可以查出来，现在最上方是滚到哪一行了。

目前我已经将代码推送至 GitHub 上了，这个功能还在测试阶段，大家可以去下载开发版，如果有 bug 请及时报告。