Tip for iterating CSS style sheets (or, how to do cache-busting)

This solution may already have been mentioned somewhere, but just in case: if you’re creating a CSS style sheet for your markdown documents, you will face the frustrating situation that edits/changes to your style sheets seem to be ignored until you restart the DEVONthink application. This is probably because something (maybe DEVONthink, maybe a system library) caches CSS files the first time it reads them. The DEVONthinkEmpty Cache menu item doesn’t have an effect on this, but you can work around the problem with a simple hack.

At the top of a markdown document you’re using for testing, reference your style sheet in some way. The simplest is probably using a line CSS: at the top like this,

CSS: x-devonthink-item://F97C31C4-88AD-417C-A90C-2E905D9E75BB

where the x-devonthink-item://... URI is the item link for a CSS file stored in your database. You could also point to an external file using a complete path like /Users/mhucka/mystylesheet.css or whatever. This makes the current markdown document use the style sheet you indicate.

Now, the hack: when you make a change to the style sheet, add a fake parameter to the URI – a question mark followed by some text, such as

CSS: x-devonthink-item://F97C31C4-88AD-417C-A90C-2E905D9E75BB?v1

Each time you change the style sheet, increment the number in the URI in your markdown document and save the document. I.e.,

CSS: x-devonthink-item://F97C31C4-88AD-417C-A90C-2E905D9E75BB?v2

etc. The parameter is ignored, but the change makes it look like a new URI and makes DEVONthink re-read the style sheet, and display your changes.

Note that other markdown documents that may use that particular CSS style sheet will not see the changes unless you change their CSS references too, or restart DEVONthink. The approach described here is really only meant for quickly iterating your CSS design. Once you are done changing your CSS, then restart DEVONthink to see the changes with other markdown documents that use the same CSS file.


I was wondering if anyone else would ever discover that :smiley:
It is a bit of a hack and I never found it to be reliable all the time back in the day, but it’s worth a mention.

(Actually, I do most of my styling directly in the document itself. If I arrive at something I want more globally, I’ll port it to an external stylesheet. And yes, I do waaay more one-off documents than most of our customers would!)

This is super smart and cool! Thanks!

1 Like