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
andlink
.
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.