Side-by-side Live Preview

[jms1]

Obsidian should have a way to show a “live preview” as a separate pane, rather than trying to make the editor itself act as the live preview.

Use case or problem

I’m evaluating Obsidian as a possible replacement for Quiver, which doesn’t seem to be maintained anymore. I am a computer programmer and a system/network administrator, I’ve been using Markdown almost exclusively for ten-plus years now.

I’m used to Markdown editors with an editor and a live preview, side by side. The way Obsidian currently implements “live preview”, by dynamically changing the sizes and text attributes within the editor to make it act like a preview, is distracting to me. An editor shouldn’t change the text attributes unless the user tells it do so.

I’ve seen where you can make Obsidian simulate this behaviour by opening the same file twice in different tabs, however …

• When I do this, I also have to manually change the tab on the right every time I change which file I’m editing on the left. The preview should automatically track whatever file I’m editing.
• When I do this, the two views don’t “sync” their scrolling positions. Changes in the source do show up immediately in the preview, but if I scroll down two pages in the editor, the preview should automatically scroll up/down to match the location I’m viewing in the editor pane.
• There’s no way to configure separate fonts for the editor and the preview. If I want to use a mono-spaced font in the editor, I also get the mono-spaced font in the preview. They need to be configurable separately.

I understand that part of this is because I have ten years’ worth of pre-conceived notions about how a markdown editor should work, or maybe it’s because I’m expecting Obsidian to be something it isn’t intended to be (i.e. a note-taking program which happens to use Markdown, as opposed to a “Markdown editor”).

I might be willing to spend the time learning some new habits, but so far I’m not seeing any compelling features in Obsidian that would make it worth the time and aggravation of doing so. I do like the built-in document management (i.e. “vaults”, and being able to quickly switch between documents using a pane on the far left) but I’m also perfectly happy to keep using Finder, BBEdit, and Marked2, especially where this allows me to have the editor and preview on different monitors.

Proposed solution

Implement “Live Preview” as a real preview, i.e. an *exact preview of what the rendered Markdown will look like, instead of trying to change font sizes and text attributes in the editor to make it sorta look like a preview.

Ideally this preview should be available as a separate window or as a dedicated pane in the main window, which automatically shows the document open in the current editor, and “syncs” its vertical position with that editor pane so that the position of the cursor in the editor window is always visible within the middle 50% of the preview window.

Current workaround (optional)

Using Finder, BBEdit, and Marked2 instead of using Obsidian.

[ariehen]

One tab group in Source mode on the left, a linked tab group in Reading view on the right. You can use a few CSS snippets (or theme settings) to adjust Reading view to your preference(s). That’s how I do it.

[jms1]

I’m not sure how CSS is going to be able to make a single preview control automatically “follow” the cursor from one editor control to another, i.e. if I switch from editing document “A” to editing document “B”, the preview would switch from showing document “A” to “B” at the same time. (And actually, I can see use cases for both “preview which automatically follows the active editor”, and “preview which stays focused on a single editor but still scrolls up and down automatically”. Somebody might need to have one document on screen while editing another.)

With that said, if you’re able to share more details about what you’re doing and how, I would like to take a look at it.

I also need to figure out what the phrases “tab group” and “linked tab group” mean. I’m not used to being “the newbie”.

[Synchronicity]

There’s no way to configure separate fonts for the editor and the preview.

You can do that with the Minimal Theme and the Minimal Theme Settings plugin’s editor font setting. (You’ll also likely want the Style Settimgs plugin.)

if I scroll down two pages in the editor, the preview should automatically scroll up/down to match the location I’m viewing in the editor pane.

The Markdown Sync Scroll plugin appears to do that.

[jms1]

I installed the “Minimal” theme and its settings plugin, this was enough to get different fonts for the editor and preview.

While reading about the Markdown Sync Scroll plugin (without installing it) I saw the “Link with tab…” option, which seems to do what I was looking for. AND if I pull the preview tab off into its own window, it remains “linked” with the edtior tab, which is something else I was hoping for. I guess I’m not sure what the plugin is supposed to be adding to the mix?

[CawlinTeffid]

I’m moving this to the archive, but if there’s some aspect of the linked tab setup that is missing for you, feel free to open a new request.

[Synchronicity]

I guess I’m not sure what the plugin is supposed to be adding to the mix?

Idk, either. I prefer live preview, so I’ve never tried it. I just thought I remembered seeing it and looked it up in case you found it helpful.

Even though I use live preview for writing, I still like using my favorite writing font for writing and editing, and a different font in reading mode, so I knew that would work for you.

[ariehen]

It sounds like you’ve got it sorted out, but for completeness sake:

Courtesy of Nick Milo (from Discord):

---

Linking two tabs together with two different view modes. The built-in Link with tab… will only link the same note. The Markdown Sync Scroll plugin allows you to link two different notes. It’s handy for translations, two versions of the same note, etc.

---

Minimal theme settings and AnuPpuccin (using Style Settings) let you change the editor font as you’ve tried out. There may be a few other themes as well. I do it using a CSS snippet that works regardless of theme (at least in the ones I’ve tried).

/* source mode font */
.markdown-source-view.mod-cm6:not(.is-live-preview) .cm-scroller {
    font-family: 'JetBrains Mono'; }

/* live preview mode font */
.markdown-source-view.mod-cm6:is(.is-live-preview) .cm-scroller {
    font-family: 'Victor Mono'; }

/* rendered & reading view font */
.markdown-preview-view, .markdown-rendered {
    font-family: 'Iosevka-Comfy-Duo' }

[jms1]

Thanks for the additional info. I did make some progress - I’m not 100% there yet, but I’m definitely farther along than when I created this forum account yesterday.

I’m picking this up again the next morning. Things I’m running into now:

• The “Minimal Theme Settings” plugin just has a text box to enter the name of a font. It would be nice if it had the same drop-list interface as the Options → Appearance → Font options, especially a way to set the font size. I’m guessing the correct place to report that would be the plugin’s Github “issues” interface, I’ll probably do that later.

• I’m using a small CSS snippet (which adds horizontal lines above H1/H2/H3 elements, I find this makes it easier to see where different sections start when I’m reading long documents). So far this seems to be working as expected, however the docs seem to say that Obsidian will recognize when a CSS file is updated, and re-draw any currently open views which use that CSS, however that isn’t happening. For example …

  h2 {
      border-top  : 1px solid ;
      font-size   : 1.5em ;
  }
  

  I just added the font-size attribute, and I have a note open in “reading mode” which has H1, H2, and H3 elements in it. When I save the CSS flie, is there some trick to make Obsidian apply the new CSS settings to the open windows?

• Issues with the “Obsidian git” plugin, but those are way outside the scope of this thread, so I’m not going to get into it here.

Also FWIW, I’m used to being the one answering these kinds of questions, so I genuinely appreciate everybody being patient with me. I am also reading through the docs on the web site - my hope is that within a week I’ll know this stuff cold, or at least know the bits of it I actually use in my own workflows. The further along I get, the more I find myself linking it - I suspect Obsidian may be what I switch to as a long-term solution, both for notes and for organizing them.

[jms1]

So my original question was, how to see a side-by-side edit/view of the same document. I managed to figure out how to do it “by hand”, i.e. open a second tab for the document and “link” them, but … while reading throught the docs I came across this page, which explains that if you hold down ⌘ (or CTRL for non-Mac people) while clicking the “view selector” icon (the pencil/book icon at the top right of the editor/viewer pane), it will automatically set up a side-by-side preview with linked panes for you.

I hope this helps somebody in the future.

[ariehen]

@jms1

The “Minimal Theme Settings” plugin just has a text box to enter the name of a font…

Minimal Theme Settings is an easy way to enable/disable settings and change class options that are built into Minimal. The font text box is just passing whatever you put in there to var(--font-editor-override) in the theme CSS. I’m fairly certain MTS can’t list the fonts installed in your system, but yeah, GitHub is the place for feature requests about that.

@jms1

So my original question was, how to see a side-by-side edit/view of the same document…

Yeah, there are loads of settings. There’s at least three or four ways to switch viewing modes. I guess it will just take some time to look through the documentation to find what commands and hotkeys are available.

For your other questions, I would open new topics in the Help Category - one question per topic if they aren’t related - and others will jump in if they can.