Preview above Markdown?

Operating system

Linux

Joplin version

2.8.8

Editor

Markdown Editor

What issue do you have?

Hello.
I am not certain if this the right place to ask this. I am wondering if it is possible to change the positions of the preview and Markdown areas, so that the preview area is above the Markdown, instead of next to it.

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

Great. This is exactly what I wanted.
Thank you.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.