Individual CSS style per markdown document

I have a lot of Markdown documents that address different audiences. For example, technical documents require different formatting than prose. It seems that DT allows to set only one global CSS style, which must be changed first if I want to render a different style.

Wouldn’t it be good to allow individual CSS style settings for markdown documents? Or is it already possible and I missed something?

1 Like

It’s already possible. See @chrillek’s golden thread for a list of ways to do this:

1 Like

This is also discussed in the Documents > Markdown Documents section of the built-in Help and manual as well as our blog, e.g.,…

1 Like

The offered solutions require the stylesheet reference to be stored somewhere in the DT database and are therefore limited to the DT environment only. The CSS: reference is rendered by the external markdown editors as content, this is not acceptable in case of document exchange with partners who do not even have DT.
Also, the file open dialog in Preferences > Files > Markdown > Style Sheet is really something terrible. It always opens my user_home directory, regardless of whether something is already specified in the Style Sheet field. So a quick change of the global stylesheet always involves traversing the filesystem (unless one keeps external stylesheets in user_home). Moreover, navigating in the Finder to the directory ~/Library/Application Support/DEVONthink 3/StyleSheets, which I understand from the documentation is the default location for external style sheets, is practically impossible because MacOS does not offer the directory ~/Library in the file open dialog.

The offered solutions require the stylesheet reference to be stored somewhere in the DT database and are therefore limited to the DT environment only.

No it doesn’t. You can use a relative URL or item link in DEVONthink, use a file:// URL from the Finder, or an online URL to a stylesheet. This is true whether you’re linking in-document or with a default stylesheet.

which I understand from the documentation is the default location for external style sheets, is practically impossible because MacOS does not offer the directory ~/Library in the file open dialog.

It’s certainly not impossible.

  • You can get to the user Library by pressing Shift-Command-G in the Open dialog and pasting or typing ~/library/application support/devonthink 3/stylesheets.
  • You can also select Go > Library in the Finder when the Option key is held and navigate from there.

In the Finder, you can press Option-Command-C to copy the path and paste it into as a stylesheet, default or otherwise.
Also, with the Style Sheet field selected in DEVONthink’s Settings > Files > Markdown, you can even drag and drop the stylesheet to add it from the Finder.

4 Likes

Your editor should conform to MultiMarkdown. If it does, it will not render the frontmatter key as text.

3 Likes

PS:

Relative

Item Link

File URL

Online URL

Online URL as default stylesheet

And because you don’t have to use the MultiMarkdown metadata syntax, the HTML <link> also works…

6 Likes

But you should URL-escape special characters, eg working %20 instead of a space character (though the space may work, it’s not syntactically correct.

3 Likes

You are right, but I was speaking about quick switch of the stylesheet. Copy/paste, type a text etc. is not instant, at least not for me. I write 15-20 markdown documents (prose) a day and I decide about rendering only when exporting the document. Often I have to see the result and if I am not satisfied, I need to change the stylesheet quickly. Then I generate a PDF.

I will consider using <link ...> to distribute a raw Markdown document, because I can’t expect all my partners to have MultiMarkdown.

But OK, the best is to open the final Markdown document in Ulysses, this editor allows very good stylesheet management and switching. I just thought DT would offer something similar.

1 Like

Note: Ulysses is a Markdown editor; that’s all it does. DEVONthink can create and edit Markdown but it’s not a Markdown application; it’s much more than that.

1 Like

An idea; you could use MacOS keyboard->text replacement to quickly switch between various
<link ...> statements?

I have ended up doing most css changing in Devonthink as many markdown editors have their own way of applying the css. Marked2 does its via settings. IA writer has its own packaged approach (themes). Other editors only apply their default look and won’t let you alter the css at all. I have found DT to be the most flexible and easiest to set up.

I don’t have Ulysses as I am put off by the high subscription and already have a licence for scrivener (which has its own way of applying css in compile too!)

2 Likes

Fortunately, this is just a setting in Finder.

  1. In Finder, bring up settings with cmd-, then in the Sidebar panel, make sure your Home directory (your short username) is ticked. (You may already have done this…)

  2. On the Home directory in the sidebar to show its contents. Then press cmd-j to bring Show View Options up. At the bottom of the dialogue you’ll see a tick box Show Library Folder.

Tick that and ~/Library will be visible in Finder without any shenanigans.

  1. From memory, this should put the Library shortcut in the Sidebar automatically, but if it doesn’t, just drag the folder to the Sidebar manually. The effect is the same: ~/Library will be visible on the sidebar in any Mac File Save/Open dialogue.

If you find you’re doing this switch of CSS sheets regularly, just drag that folder to the sidebar as well, which will cut out another couple of steps.

HTH.

Are you eschewing shenanigans? :flushed: :wink:

Eschewing shenanigans assiduously assuages acerbic schadenfreude: serendipity ensues.

1 Like

Well, I suppose that’s true :thinking: :slight_smile:

Not at all. It’s well documented how to go there. And why would you limit yourself to Finder to access files?

Anorher beautiful and small renderer is marked by Brett Terpstra https://marked2app.com/. There you can set and choose different css styles too.

1 Like

Yes and no. Marked2 app has its own quirky way of applying css and includes a ‘wrapper’. Marked CSS is added via settings and not through the document itself. Creating your own Marked css is possible (I have done it) though takes experimentation.

That is - Kind of - true. But then my question would be: Is markdown the right format? I use pandoc and different LaTeX templates to compile my markdown documents. The destination css is definined by the used template. If document design is important don‘t sent your markdown source file but the compiled PDF or docx or whatever.

2 Likes

I think it would be more unusual to share the Markdown document, kind of like sending someone the raw HTML of a web page.