How to Style Markdown

The beauty of Markdown is that you don’t actually have to worry about formatting. You just add a few simple markup elements to your text and it will look good in the preview. Nevertheless, you may have heard that you can in fact change the appearance of your Markdown document. But how does this work?

For rendering, Markdown is first translated to HTML, the language in which web pages are written. This can be styled with CSS (Cascading Style Sheets), a way of describing how certain HTML elements are supposed to look like. The actual rendering on screen is finally done by a web browser engine, just like the one in Safari but also used by DEVONthink and DEVONthink To Go.

For example, in Markdown you mark headers by beginning their line with one or more hash # signs. The Markdown preprocessor translates this to the HTML tag, <h1>, <h2>, etc. In the CSS stylesheet, a text file with styling instructions, you can tell the browser engine to set these headers large and in a certain font.

Our apps apply their own, built-in CSS stylesheet, but you can also tell them to use yours, what we have already discussed in another blog post. In DEVONthink you can choose your own stylesheet in Preferences > Files > Markdown > Style Sheet. In DEVONthink To Go, open Settings > Markdown > Additional CSS and add default styling for all your Markdown documents or paste an item link to a CSS stylesheet in one of your databases.

With an online search, you can find an ocean of information on CSS styling as well as ready-to-use CSS stylesheets for Markdown, made by professional designers. w3schools.io has a good tutorial on how to write CSS for Markdown, and here are also some great posts from our forum, including a thorough series on Markdown and CSS from our forum friend @chrillek:

• A Matter of Style — Markdown
• CSS for Markdown — the series

And finally, check out the corresponding sections of DEVONthink’s and DEVONthink To Go’s built-in Help and documentation.