Change CSS for markdown files in DT3?

I have tried to follow all the directions in DevonThink to change the Markdown CSS file, to no avail.

Is there some guidance that I’m missing? Every time I add a new .css file in Preferences it seems to be ignored …

Is it applied after quitting and relaunching DEVONthink?

Yes, I have quit and restarted DEVONthink.

I add the .css files to my Downloads folder and then select them in DT3 Preferences.

Could you please post the CSS file and a sample document not working as expected? Thanks.

Hi Bluefrog. I know you’re a big advocate of markdown. I’m really quite happy with the markdown rendered view in DT3 (most of my notes are now markdown) but wondered is it possible just to increase the line spacing to say a little bit wider for example 1.5. I don’t need to have a brand-new CSS I just wondered where I might make that simple change whether that’s possible or not, by tweaking the default CSS. It would be a little easier for my eyes. Please redirect me if it’s already been covered in the forums I could not find quite what was looking for. I also know you did a great summary of styling and markdown and I couldn’t quite find that either.

Looking into the future would be lovely to have a few different built-in templates to choose from in Devon three, but I can see the prolific amount of research and development you put into this app and now you have to prioritise that accordingly and that might be pretty low on the list. Both DT3 and DTTG3 are great updates btw. Just amazing.

Are you already using a default stylesheet?

No just the standard DT3 view for markdown without stylesheet. I have tried a few stylesheets, but they are always a little over the top for me, so am happy with the out of the box view except would like to space it a little more for readability (at least for my eyes on my 13 in MBP)

  1. Open TextEdit.
  2. Create a document and press Command-Shift-T to convert it to plain text.
  3. Enter:
body {
line-height: 1.5;
}
  1. Save it as DTStyle.css in ~/Library/Application Support/DEVONthink 3/Style Sheets.
  2. In DEVONthink’s Preferences > Media > Markdown, select this stylesheet as the default.

This will apply the line height to every Markdown file in DEVONthink unless the style was overridden in a specific document.

This approach of course works. But only as long as one is not using DTTG, too. The global setting for the MD stylesheet is not carried over to DTTG (of course, since one can specify a stylesheet residing outside of DT in the Mac’s filesystem).
Unfortunately, the only way to make a stylesheet work on the desktop and the mobile version of DT is to include it in a DT database and then add a link to it at the top of every MD file like so:
css: x-devonthink-item://0841105D-70B7-4518-8E2C-68E25CF8FC38
where the part after css: is a link to the CSS file in the database. There’s an alternate way with a link element, but this has the same disadvantage: One has to include these links into each and every MD file.

May I therefore humbly suggest that one of the next DTTG versions allows for a global MD style sheet preferences as well (which should preferably be synchronized with DT)? While I’m at it: It would also be nice to be able to specify JavaScript files to be loaded by DT for all MD files. You’re doing that already implicitly with Prism (and possibly Mermaid?) anyway. Making it more flexible would allow for more MD markup without changing the internals of DT (cf. this post: CSS für Devonthink - #13 by chrillek)

Thank you Bluefrog, is there a simple way of preserving the font (applying this css seems to change to times roman but not sure why)?

I tried this but seems not working in last 3.9.5 version. See capture. I saved the css file and restarted DT just in case.

The CSS is only used by the preview, the editor is not HTML-based.

1 Like

F****… Is there any way to have bigger font size in the editor? I don’t see any working option in configuration.

Forget it, I’ve found it. Editing → Plain Text Font.

Do you want a bigger font on the screen, or on the output file to say paper? To get bigger font on screen Menu: View → Zoom → Zoom In (or Out).

Forgot this one as well. You are right, but I’m getting old like hell and my eyes aren’t what used to be. I want it bigger. Bigger is better. The biggest is even best. (Sorry, I finished mi calm-pils :crazy_face:).

1 Like