Preview above Markdown?

Support
2

Hi @Flounder-Kipper, welcome to the forum. This category seems like the right place to ask this.

Add this CSS to userchrome.css to move the preview above the editor:

.rli-editor div[style^="position"]:nth-child(2) {
  flex-direction: column-reverse !important;
}

.noteTextViewer {
  height: 100% !important;
}

Note: with the preview above the editor, I don't know how to move the title bar and toolbar in between.

One can also move the preview:

  • Below the editor by replacing column-reverse with column.
  • Left of the editor by replacing column-reverse with row-reverse, then removing the .noteTextViewer rule (it doesn't do anything for this case).

Edit:

I haven't found out how to get column and column-reverse working with the new editor.

For how to get row-reverse working with a fixed border and margins, check out this post: How to swap the markdown and preview pane? - #7 by HeyJ0e

4 Likes