When I posted about it, I honestly didn’t think anyone other than myself would actually want to use Marked as a teleprompter, so I let a few quirks slide. Turns out a bunch of people were interested in the idea, so I spent a few hours revamping the autoscroll and adding a nifty visual countdown for the pause tags.
It was a sprint that also included minor updates to howzit1 and mdless2, but a complete rewrite of the way Marked performs autoscroll was my primary focus in this orgy of code. As of this writing, the changes are live for Paddle customers, and awaiting review for MAS and Setapp users.
Marked’s autoscroll feature (hit s when previewing a document) is entirely JavaScript-based, so I’ve been at the mercy of the older version of WebKit that Marked needs to use to offer its functionality. To fix the jitters, I shifted away from trying to get simple scrollBy smooth scrolling to work with an interval or repeated timeout, focusing instead on using pure CSS transforms to get a truly smooth scroll.
Now it performs translateY transforms of any increment with one-second transitions, repeated on a one-second timeout for a seamless loop. It scrolls smoothly at any speed. The navigability of the document suffers a little when autoscroll is running because the actual document is now shifting outside the bounds of the window, but you can simply toggle autoscroll off (hit s again) and the preview will seamlessly reposition so you can continue scrolling and navigating without a hitch.
In my last post on this topic, I mentioned that I’d added the ability to include pauses in autoscroll using HTML comments. I found this handy, but it could also be a bit hard to know exactly what was going on in practical use. So I added visual countdowns to it: when a pause tag hits the vertical middle of the screen (give or take a few pixels, depending on scroll speed), it pops up a horizontal progress bar that animates down to zero for the allotted number of seconds. It makes it very obvious what’s happening when the scroll stops, and exactly how much time you have to breathe and prepare for the next section.
I was proud enough of both the improved scrolling and the countdown bars to make a new video. If you’re considering using Marked as a teleprompter, I think you’ll dig the changes!
