Writing custom CSS for Marked

There's now a repository for Custom Styles on Github. Feel free to browse, use and contribute there.

With Marked's ability to use custom CSS files, the sky's the limit when customizing your Preview. All CSS3 options that work in Safari will work in Marked. With default Markdown files in Marked there are only a few HTML elements you need to handle; all of the content is in a div with the id of "wrapper", everything else is determined by your document markup.

If you're designing for personal use, there are no rules. Turn on CSS tracking with the checkbox below the custom CSS selector and when you edit and save your custom CSS, it will update the preview.

After you first run Marked, you should find a skeleton file to work with in ~/Library/Application Support/Marked/custom.css. This is the preferred base from which to work.

All of the default, uncompressed styles can be downloaded here. You can edit them at will, but it would be appreciated if you left the comment section at the top with the original credits in them. Copy your chosen file to a new file and name it as you want it to appear in the Custom Styles menu. The filename, sans extension, is what determines the title.

If you distribute your theme based on one of the base themes, please feel free to add yourself to the credits as a contributor.

If you're planning to share your CSS creation, there are a few points you need to cover. First, there are some body classes that need to have styles applied:

Body classes

The following styles must be included in any Marked CSS to be shared. The body classes allow you to target and modify any selector under different preference options.

Inverted

When the user selects "Invert colors" in Preferences, a class of "inverted" is added to the body tag. You can use this to target the high-contrast, light on dark styles.

You only want inverted styles to apply to the preview, not to print, so use a media query (@media screen) to restrict it. The code below is fairly all-purpose and in most cases you can just drop it into your stylesheet for compatibility, but feel free to tweak it.

@media screen {
    .inverted, .inverted #wrapper { background:#111 !important }
    .inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,
    .inverted h3,.inverted h4, .inverted h5, .inverted h6, .inverted pre,
    .inverted code,.inverted th {
        color:#eee !important;
    }
    .inverted a { color:#fff;text-decoration:underline }
    #wrapper {
        background: transparent;
        padding:20px;
    }

}

Poetry (version 1.3)

The user can choose whether tab-indented text is poetry or code. The only difference is that pre/code blocks are styled more, um, poetically if poetry mode is chosen. The "poetry" class is applied to the body tag.

Get as creative as you like with the formatting, but here's a basic snippet:

.poetry pre code {
    font-family:Georgia, Garamond, serif;
    font-style:italic;
    font-size:110% !important;
    line-height:1.6em;
    display:block;
    margin-left:1em;
}

Special cases

Tables, Figure/Figcaption, and the special case of a.footnote and div.footnotes>a also need to be considered. There are no set rules on how you handle them, but take a look at the default styles to get an idea what CSS rules Marked needs.

The standard table styling across all of the default styles uses transparency on the alternating rows to make it blend softly with any background. You can copy those styles, or go your own route, just make sure you've styled them! Same for figure and figcaption; add an image to a document with alt text to see how the markup will come out and style appropriately.

Footnotes included in a document will render a link within the content (a.footnote), and a div at the end with the referenced text (div.footnotes). Again, see the default styles for reference. To avoid changing the line height on lines containing a footnote reference number, be sure to include something like:

sup,sub,a.footnote {
    font-size: 1.4ex;
    height: 0;
    line-height: 1;
    vertical-align: super;
    position: relative;
}

To keep the return arrow on the same line, include:

.footnotes p {display:inline}

It's also a good idea to include a general rule for all images to keep them within the width of the page. Something like:

#wrapper img { max-width: 100% }

If your theme has additional padding or a fixed width, modify the max-width to fit.

Be sure to include print styles that remove any background colors, fixed scrolling, etc. Use "@media print" to define them within your theme.

Link-hiding in print is handled outside of the main theme, allowing users to choose to have link highlights and underlines hidden in printout. As long as you have a base style set for the text, you don't need to worry about this.

So, have at it. Convert your blog theme, create a killer print style for PDF documents, or craft the perfect preview for the style of writing you do. If you make something awesome, let me know and I'll post it for the whole Marked community.

Webkit Inspector

Right click on your preview window and select "Inspect Element" to launch the Webkit Inspector. This is an easy way to see what elements exist and what CSS rules are affecting them. You can even make edits within the Inspector to see how the results will look. See Apple's Developer Tools documentation for more information on the Webkit Inspector.

Other tips

Table of contents styling

If you use the <!--toc--> token to insert a table of contents, you can override the preferences for Table of Contents level indicators in a Custom Style using the "#wrapper" to increase specificity:

 #wrapper #mkreplaced-toc li {
   list-style-type: square;
 }

This would make all of the list items in the Table of Contents use a square bullet instead of what was set in preferences when your Custom Style is active.