Summary on how to use its own CSS to render Markdown

Hi

I’m using DTP for many years but i never manage to get really into it because the markdown support seems not really production ready.

My question is simple and seems to last since you introduced Markdown support without any real “thoughts” (imho) on how to render it easily and how to customize the CSS. The " Best Alternative" View is not really a user friendly way on how to preview markdown.

Indeed to create a note in DT is fine but I must retrieve it easily and the rendering must be customizable, this is the basic principle of using markdown, separation of the content and the form

So to retrieve my notes fast Alfred Workflow can be used. but I want to see the rendered page not the source page.

How to render Markdown using its own custom CSS. A lot of posts exists, and I’m not interested in an Applescript based solution to render

The approach was was to enter as the first line of a markdown post the link to the CSS as


<link href="file:///Users/path/to/css_file.css" rel="stylesheet">

ok but with 2.10 this seems broken on my installation the default rendering is taken and don’t know if any logfile is containing error messages.

Furthermore, there is a post on how to use Applescript to automatically assign such a line to every Markdown file created.

Would it be possible to get some information how is the official way to use custom CSS? The Web preferences is surely not the way since affect also WEB pages rendering from bookmarked pages.

Perhaps, one should also consider to allow for asciiDoc or reST and use pandoc or equivalent libraries internally to render these file types…

For the moment I must use visual code and publish my work in Evernote, but I would really welcome that DT fill the gap.

Thanks


<link href="file:///Users/path/to/css_file.css" rel="stylesheet">

This is a perfectly valid way to style Markdown.

I write long-form Markdown in DEVONthink every single day, and also have a very custom stylesheet linked via the method shown.
styling.png
…and no, it isn’t required to be in DEVONthink’s App Support folder. I just happened to choose that particular file.

You can also use a MultiMarkdown metadata header, like…


css: /Users/path/to/css

Why do you think it’s not “user friendly”?

What is difficult about “retrieving” a Markdown document.
Rendering is customizable, via styling, internal or linked.

I set up a template called “Plain markdown.md” which contains the following:

created: %year%-%month%-%day% %time%
author: %author%


<link href="/_resources/default.css" rel="stylesheet"></link>



The header (created and author) is not strictly necessary, but it doesn’t hurt to have it since it doesn’t show up in the preview. As BLUEFROG mentioned, I could also specify the path as a third entry named “CSS” in the header (I can’t remember why I’m not doing that… Probably because it used to not work when markdown support was added to DEVONthink.)

I keep the CSS file inside my database in “/_resources/default.css” because I use multiple computers that don’t all have the same user name. And I use the filename “default.css” everywhere such that if I want to change template, I can change the content of the file without having to change paths in every file.

I also set a custom keyboard shortcut to create a new templated markdown file. I trigger it with Keyboard Maestro, but it also works with the built-in “System Preferences ➞ Keyboard ➞ Shortcuts” menu. The “Menu Title” needs to match the file name, without the extension, i.e., as it appears in the “Data ➞ New from Template” menu.

@alexchabotl: Nice work on the template! Such simple but powerful (and underrated) things.

I actually keep my stylesheets in a database too, but (for reasons of continuing self-education) I keep mine in a group similar to web content: /resources :smiley:

Interesting, I had no idea this was possible!

Where do you guys get your stylesheets from?
I am in a similar boat in where I didn’t use DT for Markdown because I hated how it looked. With a few interesting stylesheets, I could definitely see myself using it more for that.

I roll my own, and it’s VERY custom (nad a ton of fun to build :smiley: )

You can Google for free stylesheets.

Hi,

is it possible to define a default CSS for rendering markdown files?

I am working on a book project and have indexed the directory where I keep all files of the manuscript. I do not want to add the link to the CSS to all files because that would be too complicated. But more importantly, I do not want to add anything to the files which I do not need for my publishing workflow. And the style information is definitely one of these things.

I just want a way to tell DEVONThink how to render a markdown file when it does not contain a link to a CSS file. In my opinion, this would be much more friendly to the user than make her add the CSS information to every markdown files.

Ciao

Maral

1 Like

@Maral: This is currently not possible but may be in a future version of DEVONthink.

@BLUEFROG this is what I meant before with easily configurable. I heard this

already as markdown support came to DT.

So was it 2 years ago? sorry I’m not trolling only wandering when Markdown support will be finally implemented ‘correctly’ …

I was already using both and CSS approach in my files using my own CSS, but as said since 2.9.x (x>7 , last time I tested my .md CSS) something is broken since I had to rework my CSS and drop some instruction. Now it seems to work

thanks anyway from your prompt answer and support

When referencing a css file stored within a database, can the reference be to a css file in a different database than the md file? I can get it to work if I keep my css in the same database, but I’d like to have a global reference (not the global Inbox, just a reference to a single file that can be used in any database).

I’ve tried using


css: /Personal/CSS/default.css

where Personal is the name of the database, but that’s not working.

Using an x-devonthink-item link works across databases, but isn’t particularly readable.

I found out that the style sheet in Preferences>Web>Style Sheet gets applied to markdown documents. I make use of this useful feature to render my markdown files, but I think the option should be more clearly named.

I would also welcome that Convert to HTML doesn’t apply its own tags, so that the preferred style sheet gets applied to simple text files converted to HTML within DT.

I’m not sure if this is what you’re looking for, but you can add a link to a file in Preferences > Media Tab > Style Sheet

You can even link to it using the DEVONthink link URL:

This way, you’ll have the CSS stylesheet in your database and it will render all of your files with this styling.

2 Likes

Just came across this and tried it out with Olivier’s CSS shared recently (A CSS to embellish *MultiMarkdown* rendering).

Using Devonthink to store and version stylesheet is a brilliant idea … and to think that until recently I didn’t even know I could style markdown !

My DevonThink experience just got much better, thank you.

I’m loving his style sheet. Having nicely styled text makes such a difference.

Yup, and it’s allowed me to make another change: use Markdown instead of Web Archive as the capture method for web pages.