Inline Markdown Note Previews

DEVONthink
1

One of the things I really like about Andy’s working notes is the ability to preview a note by placing the cursor over the note’s link. Fortunately, with a little bit of JavaScript and CSS this same functionality can be implemented for Markdown notes in DEVONthink.

DT3 Note Preview
DT3 Note Preview2008×1840 368 KB

You can snag the JavaScript from here, and the CSS from here.

The JavaScript and CSS files need to be referenced in the Preferences… > Files > Markdown “Style Sheet” and “JavaScript” input boxes.

There’s a few known issues with the note preview functionality, which are:

  1. The script will only preview text files that start with a Markdown h1 header (e.g. # Note Title)
  2. Because Remarkable is being used to convert Markdown to HTML, wiki internal links are not rendered as links in previews. This really isn’t a big deal because links in previews are not clickable.
  3. The Preview popup placement code attempts to position the preview so that it’s on the screen. If your DT3 window is quite small, the placement algorithm may not make the best choice.
3 Likes
2

Cool. Just a note of caution: did to a bug in the current version of DT, including your own JS will turn off Prism support.

3

Yeah, I ran into that problem with MathJAX. I was able to restore the MathJAX functionality by having my custom JS load it.

4

This is absolutely amazing! Thank you very much for sharing!

Do you know whether (and how) it would be possible to work around this? I don’t want to miss PRISM.

Would that be possible for PRISM too?

5

Hmm…it doesn’t look like there’s an official CDN for PrismJS, so I’m going to need to do some further sluething. FWIW, with MathJAX enabled, PrismJS did not break for me when specifying a custom JavaScript file.

2 Likes
6

This works. Again, thank you very very much. This is so cool!

7

To clarify: including a custom JS leads to a missing closing tag. Maybe loading MathJax somehow alleviates that…

1 Like