CSS for Markdown, the basics

I found this series of posts very useful. I’m quite experienced in using CSS, but this is the first time I’ve used it for markdown.

I modified a CSS file based on A CSS to embellish *MultiMarkdown* rendering, created a ‘Global settings’ database, put the CSS file there, and used the x-devonthink-item link in the DTP preferences.

I also put a copy in my ‘~/Global settings’ folder so it is globally available no matter if DTP is running. The reason for this is that I have a quicklook handler installed which displays a markdown file when you quicklook. This handler is available in a number of ways:

If you use macports, type ‘sudo port install QLMarkdown’ in a terminal window.
If you use homebrew, type ‘brew install --cask qlmarkdown’, or copy the zip file from GitHub - toland/qlmarkdown: QuickLook generator for Markdown files. and put the result in /Library/QuickLook (or ~/Library/QuickLook if you want to make this change limited to a single user).

Once it is installed, you can go to /Library/QuickLook/QLMarkdown.qlgenerator/Contents/Resources and replace ‘styles.css’ with a soft link to wherever you put your modified css file (you will have to choose ‘Show package contents’ from the context menu when you get to QLMarkdown.qlgenerator). If you don’t want to use a soft link, you can simply replace styles.css with your new CSS file.

Now getting a quicklook for a markdown file will use your new CSS rules, and the appearance matches what you get in DTP.

8 Likes