How to Add Some Style to Markdown

Markdown is a file format often used in web development as an abbreviated syntax to writing raw HTML. Written in plain text with an easy to learn syntax, it has become more popular in some circles outside web work. Markdown allows you to quickly write and use simple control characters, e.g., words or phrases surrounded by single asterisks are rendered as italics; bold type uses double asterisks. In a Markdown-compliant application like DEVONthink, what you’ve written is previewed as web content. However, the appearance of the rendered content may be a bit plain for some tastes. But you can control the look by using cascading stylesheet, .css, styling.

CSS styling are descriptions of the parts of a web page and how they should appear. For example, you could use strong {color:red;} to show bold text in red. A full tutorial is beyond the scope of this blog, but searching the Internet will yield many helpful results.

CSS can be written directly into individual Markdown files but they are often created as separate files. If you have a desired stylesheet, it can can be linked to in individual documents. Alternatively, you can specify a default stylesheet in DEVONthink’s Preferences > Media > Style Sheet. This can be a .css file on your local machine or even a URL pointing to a stylesheet online. Unlike adding the styling to individual files, this method applies the stylesheet to all Markdown files you preview in DEVONthink.

Additionally, we previously wrote a post in our user community about the basic methods of applying stylesheets to Markdown in DEVONthink. This includes using a default stylesheet as well as combining one with individual styling. You can read it here: A Matter of Style

But what if you don’t have a stylesheet and find the prospect of creating one too daunting? One of the friendly people in our community, Dr. Olivier Spinnler, took the time to offer what he had found and learned about Markdown styling. You can read his post and download a small file from here: A CSS to Embellish MultiMarkdown Rendering. In the package, he also included a small primer on some basics of styling you may find helpful.

PS: More information on Markdown in DEVONthink can be found in the integrated help or manual under Documents > Markdown Documents.