# Stack Exchange Side-By-Side Edit and Preview

Note: the new inline editing breaks this user script pretty seriously, so it doesn't work at the moment. I will be working on fixing it to work with the new system when I get a chance, but it may take a while before I can do that.

## Screenshot / Code Snippet

In response to requests for an option to show the markdown preview next to the text editor, and my own desire for this feature, I have created a small user script to do this. The Stack Exchange Side-By-Side Editor (SE-SBS) adds a link to your edit toolbar to enter side-by-side editing mode.

This mode creates a lightboxed window with just the edit text area and the markdown preview. In Chrome, the edit area will resize dynamically with the window to best fit the size. The markdown preview will always be the default width, so that your preview looks exactly how it will on the page.

This script is also designed to play nicely with the SE Editor Toolkit. When the editor toolkit is detected, the link is shortened to allow space for the toolkit's buttons. The editor toolkit is disabled in side-by-side mode, but gets re-enabled when you return to normal editing mode.

### Platform

Tested on Stack Overflow, Meta Stack Overflow, Server Fault, Super User, Web Apps, Gaming, Ask Ubuntu, OnStartups, and several other SE 2.0 sites.

Tested in Firefox 4 w/ Greasemonkey and Chrome 10.

This script is released under a Creative Commons Attribution-NonCommercial-ShareAlike license. Basically, you're free to change and redistribute it for non-commercial purposes if you credit the author (myself).

## Known problems:

• Edit text area does not automatically resize in Firefox. This is due to how position:fixed is handled in Firefox differently from in Chrome. A workaround is in progress.

• Markdown preview automatically scrolls back to the top whenever the preview is refreshed. Still under investigation.

• Broken on Ask Different, due to the very different styling and copious use of !important in the site's stylesheet. Under investigation.

## Contact

The best way to provide feedback on this script is by adding answers or comments below. You can also contact me at the email address listed in my Stack Exchange profile.

-
@nhi that's pretty neat, thanks –  systempuntoout Mar 26 '11 at 7:33
Bug report: this doesn't work correctly on Ask Different. –  Nathan Osman Apr 5 '11 at 23:10
@GeorgeEdison thanks for the tip. It looks like Ask Different's stylesheet is substantially different from most SE sites. I'll take a look at this soon. –  nhinkle Apr 5 '11 at 23:20
Nice, if your screen is large enough. Bug: I can't see the edit summary in side-by-side mode (Chrome 11.0.696.48). I can return to normal mode to fill it in, but that makes it more likely that I'll forget to enter a summary. Feature request: being able to see the question (with scrolling). –  Gilles Apr 22 '11 at 19:37
This is freaking awesome! :-) –  Oscar Mederos Apr 29 '11 at 15:02
@nhinkle Is it possible to restore the page to the position I was reading when clicking on "Exit side-by-side edit mode" instead of bringing the scroll bar to the begining of the page :? –  Oscar Mederos Apr 29 '11 at 15:24
Thanks for the comments everyone. It'll be a few weeks until I can work on this more (it's exam time), but I will take all of your suggestions into consideration for the next version and see what I can do. –  nhinkle Apr 29 '11 at 16:57
bug report Inline editing breaks Side-by-side –  Sathya Jul 11 '11 at 4:47
I will look into this; thanks for the info @Sathya. –  nhinkle Jul 11 '11 at 7:30
Now that is a feature I would like to have. Is there any chance for an update soon? –  Raphael Aug 10 '12 at 10:58
@Raphael I haven't had time to look at this recently, but will try to poke around a bit and see if I can get it working again. –  nhinkle Aug 10 '12 at 16:46
Can you add this to the Chrome Web Store and have Google review it as non-malicious? Then put an "inline install" link here. Google recently changed how Chrome extensions (including user-scripts) are installed - a user has to manually install any unverified third-party extensions. In other words, SE users have to go to Tools > Extensions and drag-drop the downloaded JS file. More info: support.google.com/chrome_webstore/bin/… –  ADTC Nov 10 '12 at 16:33
The Chrome Web Store suggestion is for when (if?) you fix this. Also, please get rid of the super-thick black border and use that extra space to widen/lengthen the editor/preview. You could also just have a simple X at the top right corner to go back to the normal view. –  ADTC Nov 10 '12 at 16:44