Styling the Markdown preview

DEVONthink Tips
1

One (much) requested feature is styling support of the Markdown preview. I think I have an interesting and very workable solution to propose.

Not everyone seem to be aware of it, but DEVONthink actually supports MultiMarkdown. In order to style the Markdown preview, we can take advantage of two MultiMarkdown features :

  1. the metadata header ;
  2. the CSS metadata in the header.

It works like this. On the first line of any Markdown text, just write this :


CSS: http://dr-spinnler.ch/myfiles/CSS/OpSpl.css

and leave an empty line below. Pronto, you’ve got a nicely formatted URL preview – as long as you’re connected to the internet. If DEVONthink can’t load the CSS file, you’ve got the default preview anyway. Of course, you can write the URL of any suitable CSS file, even a local one. The advantage of an online one, in my opinion, is that it works regardless of where your text file resides. Very handy if you synchronize with DEVONthink to Go, for example !

Please take a look into my CSS file. I’m not a CSS wizard, not even an HTML coder. I’m just a slightly nerdy psychotherapist. So, if someone could improve on it or hint me to a more elaborate one, I would greatly appreciate it ! I’ve given extra care to the vertical spacing in order to improve legibility. And I very much prefer a nice blue text – like ink – over (funerary) black.

Enjoy!

Dr Olivier Spinnler

2

Thanks for the input! You can also use link elements, like ```

or a stylesheet in the database, like one in a subgroup of the Markdown file…  ```

<link rel="stylesheet" href="styles/myStyle.css" type="text/css">
3

It is a good idea not to use too-specific a name for the CSS style that is being added - it is being hardwired into the Markdown files to which the stylesheet link is being added.

Jim’s use of the name ‘myStyle.css’ is good, because you can keep a library of different styles that you like, and when you want to change to a new one, you just need to rename the new style as myStyle.css and replace the old one.

There are a number of interesting Markdown styles that can be downloaded, e.g. http://markedstyle.com/styles and https://github.com/markdowncss

4

Is there a way to link to a style sheet that is not in the group (or a subgroup) of the md-file?

I’m trying to link to a style sheet that is in the root folder of the database and none of the usual suspects is working ("/myStyle.css" or “~/myStyle.css”).

Thanks a lot!

5

That’s a limitation of version 2.9.12, version 2.9.13 will improve this.

6

Great to hear! Thanks a lot!