I’ve been using Marked 2 as a Markdown previewer recently. It’s been a boon to my workflow when I have a wide variety of DT files open and need that one visual reference of the thing I am editing sitting somewhere I can always see it.
One thing this has lead to is that I have finally been able to mess around a little with CSS and tuning the look of my rendered markdown. I have read @chrillek’s CSS posts and futzed around with a few tweaks here and there but never really settled on anything major. I have frequently just cleared out the setting in DT and DTTG back to defaults just so there’s some sort of visual similarity between Mac and iOS.
Now that I have a couple of style sheets in Marked 2 working for me, I am struggling to get them to work in DT or DTTG. The main one right now is based on Yeti from Bert Terpstra’s collection. Most of my customizations have been to heading insets and top/bottom margins.
I’ve tried a few things, importing a css file into my Global Inbox and pasting the link to that file into the preferences, restarting DT but I am not seeing any change. I’ve tried selecting the same CSS file in the finder from within the preferences but that doesn’t seem to work.
I am a little out of my depth with the nuances of CSS so I don’t know if this is even a valid CSS for Devonthink.
Overall I’ve tried a bunch of things, with regular restarts and nothing seems to work.
Suggestions?
(I am fully aware that asking the question like this makes it more likely that within 5 minutes of posting this the answer will present itself through some other channel. If that’s what the Deities of Cioincidence deem appropriate, I won’t argue)
No, not likely. Your question is so general as to be unanswerable: i did things but they didn’t work out…
As always: convert the MD to HTML in DT and look at the HTML in you favorite browser’s developer tools. My bet is that the CSS does not fit the HTML because it’s too specific. (Aside: I have no idea why sometime would offer CSS that works only with one program, since it’s very simple to write it in a generic way. Not to mention that they set the font size in pixels, overruling the user’s preferences – double bad: the user is king/queen, and pixel dimensions are a no-go in the times of mobile devices.)
If that doesn’t help: ask a specific question providing information on what you did, what you want to achieve, and what you see happening (or not)
And my further recommendation: Don’t just start linking in stylesheets. I would strongly recommend you add the styling directly to a document the style would apply to. Then you can see the effects and make adjustments in real-time.
Just put the styling in like so…
<!-- Styling -->
<style type="text/css">
… add the styling in here but don't put spaces between the elements, e.g.,…
p {
color: orange;
}
a {
color: red;
text-decoration: none;
}
</style>
When it’s to your liking, you can take the styling minus the opening and closing style tags and put it in an external stylesheet to link.
I concur. Don’t use other people’s style sheets unless they’re curated. Best approach is to write your own – you learn more, and you can be sure that you don’t stumble on ages old stuff.
I always write my CSS in Visual Studio Code, mostly for its proactive error reporting and autocomplete. If you add css: item-link-to-css-file to the frontmatter of a markdown document in DT, any changes to the CSS file will be applied upon refreshing the rendered view.
That is not necessarily true as it’s possible for the styling to be cached and not appear to update after a change.
PS: That is a valid MultiMarkdown metadata header, but it’s also possible to use the standard HTML method <link rel="stylesheet" type="text/css" href="…" />.
Ah yes. A reminder of why I have made several attempts to come up with a look I like better than the defaults, and after running into change/restart/research/change/restart
I eventually give up and go back to the defaults.
For the majority of the time since I adopted DevonThink and soon after writing in markdown,
my markdown doesn’t leave my purview. When things need to go further it’s into Word or PPoint or graphic software and Fountain.
That’s changing though. I need to be able to push out PDFs from finished markdown files with some level of control over how they look.
Marked 2 showed me a quick way to go through many different looks and I could tweak values quickly and on the fly and start to dial in my goal. I naively figured I could eventually use the resulting CSS in DevonThink. So I followed the manual and linked to a CSS file using the preferences in DT. I pointed the preferences at a file in my documents folder as well as pasted a link to the CSS file in my Global Inbox. Frequent restarts between all changes. No noticeable result.
From page 41 of the DevonThink manual
Styling: Styling your Markdown documents
can be done with internal styling or externally
referenced stylesheets. If you have a specific
stylesheet you'd like to use globally, you can
specify one in Preferences > Files > Style
Sheet..
But then, after getting frustrated again I post here and get this response:
I disagree. It wasn’t so general. As I stated in the original post where I linked to a CSS file. I listed the things I attempted (importing CSS files, linking to external files). I explained they weren’t working for me. I was trying to do what the manual said was possible: Find a style sheet that looked like what I wanted and link to that.
You actually hid the better and actually useful answer in your little aside. That style sheet uses some sort of nonstandard CSS that only boffins would know.
I followed a link in that original Yeti.css to the file he modeled it on and downloaded that one and now it works just like the manual says a file should work.
Either way we can mark this as solved enough for me.
It is perfectly standard CSS, and there’s no need to use a derogatory term for people who know CSS. But what this stylesheet does (following misleading hints from the Marked2 documentation!) is to prepend every bloody element selector with an ID.
So, instead of h1, it uses #wrapper h1. Which does not make it “nonstandard” – it were “nonstandard” if it contained bugs or features that have not yet been widely implemented.
But it caters only to Marked2’s weird way of rendering HTML. Namely, stuffing most of the HTML in a div id="wrapper" element:
And many of the people writing stylesheets for Marked2 think (why soever) that they have to follow that lead and prepend #wrapper to their element styles.
In any case: If you want a CSS that works with any rendered Markdown, don’t use id selectors. IDs are usually not added to HTML elements by renderers. Nor should renderers include HTML elements in useless divs as Marked2 does. That’s just a no-go because it makes the structure more complicated than it needs to be and thus the work of CSS authors more difficult.
BTW: It’s interesting that Marked2 adds an element style to this wrapper, and a quite pointless one at that. If one wants to have a single column of text, just don’t do anything. And leave the rest to the stylesheet. It also adds element styles to img elements. I don’t like that – it’s hidden, it’s a height in pixels, and I don’t see why one would do that instead of leaving it to the CSS. Same for blockquote. Ugh.