40

About

This user script makes it easier to edit long questions and answers by doing the following things:

  • It constrains the height of the Markdown preview to 500 pixels by default, so you can see the preview of the section you're editing (and don't have to scroll down a mile to see the preview of the last sentence you just edited). When you move around in the text box, it will scroll the preview according to your text cursor movement, to keep the part visible that you're working on.

    You can press Ctrl-, (that's a comma) to toggle between this height-constrained mode and the normal, full-height mode (e.g. for your final proof-reading run).

  • When you click inside the text box or press Ctrl-. (that's a period), it will highlight the position in the preview that corresponds to your text cursor with a flashing red ellipse.

  • When you click on some text in the preview, it will move your text cursor to the corresponding position in the text box. In other words, this is more or less the opposite of the previous point.

Video

If that description is too confusing, here's a short screen cast that shows what it looks like. The yellow sphere around the mouse cursor is just so you can see it more easily; when this sphere turns red, it means "click".

Caveats

There are a few issues with this user script that you should be aware of. I'm putting the script out there anyway because I have been using it for a while now and have found it to be extremely helpful, despite these caveats.

  • This is anything but high-performance JavaScript. Especially the "click on preview -> find corresponding source position" can take a noticable amount of time in long posts. But everything else doesn't come for free either – there's a lot going on everytime you just press a cursor key in the text box. On a reasonably modern computer this shouldn't be an issue (I don't notice a lag when typing), but keep this in mind when running it on your old 386.

  • It usually works, but not 100% of the time. In the "click textbox -> highlight preview" direction, it's sometimes possible that the end of a line will be highlighted even though the word is actually on the next line. It will almost always be correct though.

    In the "click preview -> move text cursor" direction, it usually works as well, but the success rate may be a bit lower. You will get the flashing red ellipse when you click on the preview; if this ellipse is in a different place than where you clicked, then you know it failed. Again, this is rare, but sometimes happens. In particular make sure you click on text, and not on white space between paragraphs etc.

  • Also note that one line in the Markdown source may correspond to multiple positions in the preview (e.g. a [1]: http://foo reference that's used in multiple places) and vice versa (e.g. a link in the preview may come from such a reference at the bottom of the post, and from the [actual][use] somewhere else in the post body). This may cause you sometimes to jump to an unexpected place.

  • It utterly fails in posts that contain client-side post-processed content. In particular this means MathJax, which is why the script will refuse to run on MathJax-enabled StackExchange sites. But don't expect it to work quite correctly either if the post has jTab content on music.se, a rendered Go board on bordgames.se, a replayer on chess.se, etc.

Download

All that said, you can just try it out and see for yourself.

13
  • "Apps, extensions and user scripts cannot be added from this website." :(
    – badp
    Jan 26, 2013 at 20:26
  • @badp As always in Chrome, you have to open chrome://extensions, and then drag the script from the download bar at the bottom onto that tab.
    – balpha Staff
    Jan 26, 2013 at 20:29
  • If you're using Chrome, you save the script to your desktop. Then you open tools > extensions and drag/drop the script into the window... magic... Jan 26, 2013 at 20:31
  • ah, I didn't refresh the page before commenting... my bad. Jan 26, 2013 at 20:32
  • @balpha When I do that, the .js source is loaded in place of the Extensions page. ("Chrome 26? Unsupported!")
    – badp
    Jan 26, 2013 at 20:33
  • Just ran this script and it's pretty frigging amazing!!! Thanks for this. I always wondered why the SE guys couldn't add something along these lines. A simple (If I click in the text area, place my cursor in that spot in the markdown editor... glad This exists. Jan 26, 2013 at 20:34
  • ...oh, right, it's got to end in ".user.js"; "sigh.js" won't cut it.
    – badp
    Jan 26, 2013 at 20:38
  • 8
    this is great! would it make sense to side-by-side the editor and preview too? Jan 26, 2013 at 21:08
  • 2
    @JeffAtwood Interesting idea, though I wonder if that's feasible. Mapping a character in a text area to a screen position is pretty much impossible.
    – balpha Staff
    Jan 26, 2013 at 21:14
  • Love it, great job.
    – plurby
    Jan 26, 2013 at 22:46
  • This is fantastic. I'd love for it to become a standard feature eventually.
    – Jeremy
    Jan 27, 2013 at 5:30
  • The mark is ~two lines off with Chrome /Tampermonkey
    – Helmar
    Sep 20, 2017 at 17:37
  • 1
    Looks like the links are broken now. Is there an updated one?
    – dx_over_dt
    Oct 23, 2022 at 23:07

2 Answers 2

1

This looks awesome. Unfortunately I am unable to get it to install in Chrome/Tampermonkey. Interestingly even with hundreds of user scripts from dozens of sources, this is the first time I've had difficulty with any script that worked in Firefox/Greasemonkey and but not Chrome/Tampermonkey.

Helpfully, when trying to install via the link, Tampermonkey silently dies and runs for the hills. Downloading the script manually and copying the code in as a new script is more helpful, but it says it is an invalid userscript. Running the syntax checker brings up several fatal errors and a number of warnings.

1
  • What are the fatal errors? And does it work if you install it directly as a Chrome userscript instead of going through Tampermonkey?
    – balpha Staff
    Aug 19, 2013 at 8:34
1

the script will refuse to run on MathJax-enabled StackExchange sites

Could you please get it to work for MathJax-enabled StackExchange sites? There are a lot of MathJax enabled sites, especially the science sites, and they could also make great use of this useful script.

There could be at least some way to enable this without hampering performance too much I hope. One way I thought of is to not process the MathJax content outside of the 500pixel Markdown preview area. That way we'd easily save a lot of performance. Though I'm not sure if this is the best way.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .