CSS handling in Markdown (conversion)

DT offers several ways to style Markdown files

  • a global stylesheet set in system preferences
  • a stylesheet set with css: <filename> at the top of the MD file
  • with HTML elements like style and link.

Using style is not a very practical solution, since one would have to include this element in every MD file to provide for a uniform appearance of all rendered MD documents.

So, the other three solutions seem to be better. However, they have drawbacks when the MD file is converted to HTML from within DT:

  • a reference to a CSS file using x-devonthink-item doesn’t work outside of DT
  • a relative reference to a CSS file doesn’t work outside of DT
  • an absolute reference to a CSS file doesn’t work away from the current machine
  • the only robust solution would be to use a URL referring to a CSS file stored somewhere on a web server.

The last option is not viable for many people because they’re not running a web server. What I’d suggest instead:

  • When DT converts from MD to HTML, it should include the CSS code verbatim in the resulting HTML (as it already does, BTW, with prism.js and the prism.css). Yes, that will increase the size of the HTML, but it will also make it useable everywhere. Which should, in my opinion, be the primary goal.

Independent of this matter: DT should define and communicate a clear hierarchy of CSS definitions specifying which CSS is included first, second, third etc. in the HTML. My personal preference would be

  • DT’s own internal styles
  • styles set by the global preferences
  • styles set by css: in the MD document
  • styles set by link in the MD document
  • styles set by a css element in the MD document
    In any case, the internal styles should always be included so that users have a guaranteed set of properties always being there which they can then change step by step.

For exporting File > Export > As Website… is recommended actually, the current internal conversion is optimized for usage inside DEVONthink.

I see. But double-clicking on an internally converted MD to open in browser will not necessarily show the sane things that DT. Isn’t that a bit unfortunate?

Actually the current approach is intended, e.g. the same style sheets are still linked and changing them affects also the HTML document. Meaning that the conversion is optimized for internal usage, not for exporting.