I am trying to develop a CSS style sheet for DevonThink 3. My goal is for there to be as much stylistic homogeneity between Markdown documents in DevonThink 3 and Obsidian. Opening a Markdown file in either should be, more or less, the same aesthetic experience, at least as far as structure and typesetting are concerned.
I am at a loss at how to write CSS code to target specific elements that I would like to modify. For example, I would like to modify how documents are transcluded in DEVONThink. In Obsidian, transcluded notes are indented within the master note. And these transcluded notes, in turn, may have notes transcluded within them, and so on. The result is a tree-like structure in which child notes are spatially indented from their parent notes, in which they are transcluded. This behavior is very nice for archiving forum threads and capturing their comment/reply structure.
I have tried opening the dev tools within Obsidian to see if I could use snippets from their style sheet, but to no avail. Anyway, some help would be greatly appreciated.
Just to clarify: you’re not going to “modify how documents are transcluded in DEVONthink”. You may be able to style something… or not (I’m away from my Mac right now), but that will not change the transclusion mechanism.
There is nothing to style in this case. A transclusion uses the content of the transcluded document as-is. As you can see in this example conversion of Markdown to HTML, the second p elements are two transcluded files…
This means there is no child/sibling relationship between transcluded content and the main document with the transclusion link.
And these transcluded notes, in turn, may have notes transcluded within them, and so on.
DEVONthink can have such nested transclusions as well.
Opening a Markdown file in either should be, more or less, the same aesthetic experience, at least as far as structure and typesetting are concerned.
While I understand your desire here, this is not something you should expect between two different applications, developed independently, using different Markdown flavors (with Obsidian using their own proprietary syntax).
Any changes in the displayed would have to be assessed as to feasibility and the broadness of appeal of the change. I have seen no other such requests at this point.
Markdown is not PDF. By default, there is no information contained in a .md document that instructs an application how exactly it should be rendered. You can try and make it the “same aesthetic experience” by tweaking the CSS, but there is no guarantee that you can get exactly the same experience without an excessive amount of work.
CSS ist not about opening a Markdown fille. It’s about styling the HTML generated from MD by a previewer/transformer.
If different previewers generate the same HTML DOM and you use the same CSS, the HTML should look identical.
Mostly, the previewers do generate the same or similar HTML DOM. But there’s no guarantee for that. Much less with more exotic (read: depending on the MD dialect) features like transclusion.
What Obsidian does in this case, might look nice to you. It might look weird to others: if I use incision to assemble parts of a larger document, why should the parts be indented? When are paragraphs in a documented ever indented like in a tree view?
Frankly, I find obsidian’s behavior irritating (if it can’t be turned off). If I want a paragraph indented, I’d use a quote or perhaps a definition list (for example). But I wouldn’t want an MD processor second-guessing my intentions when I transclude files.
A bit late reply but I just stumbled on this post. In DevonThink I use a tweaked version of Olivier Spinnler’s CSS file. I started using Obsidian recently and discovered he made one also for Obsidian (Olivier’s theme) which I installed and haven’t tweaked sofar. You’ll at least be able to achieve “stylistic homogeneity” in reading view.
In my opinion, this CSS has several shortcomings (I’m only looking at the “blue” variant now):
Font sizes specified in pixels - first bad. This is a no-go since ages. First, the user has the right to specify font size, not the style sheet developer. They are short-sighted, perhaps, and if they want their font size to be 24px (or whatever), so be it. A style sheet should never interfere with that.
Font sizes specified in pixels - second bad. This again is a no-go since ages, simply because a pixel is not the same size on different screens. Font size should be specified in relative units like em or rem. What the author interestingly does, but only for the headings.
the rules defined for “preview” mode are limited by .markdown-preview-view, which makes the stylesheet pretty useless for any tools not providing this wrapper class. It is not bad per se, but not necessary either. If one wants different styles in other context, just use the class selector there to increase specificity.
h1 headers in preview mode are rendered in a small-caps font. Personally, I prefer stylesheets not to interfere with the text I’ve written (and I hate all upper-case text).
The best way to achieve identical styling in different programs would be, in my opinion, to use the same styles in all of them. Preferably stored where all programs can access them so that changes are required only in one place. That would even be possible with the CSS mentioned here if one removes the useless .markdown-preview-view selectors.
