Side by Side Preview in web based readme.md editor

[SerratedSharp]

Select Topic Area

Product Feedback

Body

When using the edit "Pencil" icon from my repo's homepage to edit the readme.md, is there a way to set the editor and preview to be side-by-side?

There's a number of features that are only present in this editor as far as I know(pasting screen clipping in and getting upload+link in one step for example), and some github specific markdown syntax that only renders correctly in this editor's preview, so for those two big reasons I really prefer to do all my editing in that we based editor. But I often switch back and forth to catch my mistakes by checking the preview, but it's a bit high friction to find my place in the document's preview and then go back and find my editing location. Is it possible to get the preview side-by-side with the editor?

[KaKi87]

Hi,

I managed to make the editor and preview appear side by side on gist.github.com (I focused on that as Gist is my only use case for editing complex markdown files in browser) :

Using the following CSS & JS :

blob-editor {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

blob-editor .file-header,
blob-editor #focus-trap-banner,
blob-editor .commit-create label {
    grid-column: 1 / 3;
}

blob-editor .commit-create,
.container-preview:not(.show-code) .commit-create {
    display: contents !important;
}

blob-editor .js-commit-preview,
blob-editor.container-preview.show-code .js-commit-preview {
    display: block !important;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

setInterval(() => {
    document.querySelector('blob-editor [data-tab="show-code"]').click();
    document.querySelector('blob-editor [data-tab="preview"]').click()
}, 3000);

[SerratedSharp]

Thanks, hopefully this improvement gets integrated at some point.

[ImJimmi]

You can use the web editor to edit and preview markdown side-by-side. Simply press . to open the editor from your repo page, open your markdown file in the editor, then choose the command > Markdown: Open Preview and rearrange the windows to be side-by-side