26

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

stack exchange side-by-side

About

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.

sbs launch

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.

Download

Download the script here, then follow the instructions on the Stack Apps tag-wiki.

Platform

Works for asking a question, editing an existing question or answer, and adding a new answer.

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.

License

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.

Improve this question
16
  • Bug report: this doesn't work correctly on Ask Different.
    – Nathan Osman
    Commented Apr 5, 2011 at 23:10
  • 1
    @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
    Commented Apr 5, 2011 at 23:20
  • 1
    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 'SO- stop being evil'
    Commented Apr 22, 2011 at 19:37
  • 1
    This is freaking awesome! :-)
    – Oscar Mederos
    Commented Apr 29, 2011 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
    Commented Apr 29, 2011 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
    Commented Apr 29, 2011 at 16:57
  • bug report Inline editing breaks Side-by-side
    – Sathyajith Bhat
    Commented Jul 11, 2011 at 4:47
  • I will look into this; thanks for the info @Sathya.
    – nhinkle
    Commented Jul 11, 2011 at 7:30
  • Now that is a feature I would like to have. Is there any chance for an update soon?
    – Raphael
    Commented Aug 10, 2012 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
    Commented Aug 10, 2012 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
    Commented Nov 10, 2012 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
    Commented Nov 10, 2012 at 16:44
  • Does this still work - Chrome 44? Is this still the best way? Are there any other ways to make Edit and Preview be visible side by side?
    – Alex S
    Commented Aug 31, 2015 at 6:50
  • 1
    @AlexS I haven't updated this in years, and I don't think it still works. Sorry.
    – nhinkle
    Commented Aug 31, 2015 at 9:19
  • @nhinkle I have tried and it seem to work, but only issue is it works for new posts, not while editing existing ones. The problem can be easily cracked I guess. While trying to edit existing posts, the side preview appears, but left editor pane is just not editable. if you could fix that, its still best way to use. Please consider.
    – Parthiban Rajendran
    Commented Nov 23, 2018 at 8:22

0

Reset to default

You must log in to answer this question.

Browse other questions tagged .