I finally realized I was probably never going to find the time to build a whole community platform for sharing Marked styles, and I don’t know how many people would participate anyway. So I started a Github repository for it.

It has one contribution right now, and that’s from me. I often make Styles that I don’t include in the defaults for one reason or another, so if nothing else, I have a place to put those, now. Grump is a little experiment I did last night that I rather like.

If you have Styles you’re willing to share, please either submit a pull request (if you’re a Github user), or just contact me directly and I’ll add it with credit to you. Requests and issues with Styles can be added to the Issues section.

Using a Style

Just save the CSS file to your disk. You can open any Style in the list and then hit the “Raw” button to get a file ready for “Save to…”. I suggest saving to ~/Library/Application Support/Marked/Custom CSS, as in the near future Marked will read from that folder automatically.

Then, open up the Style Preferences in Marked and click the “+” button under the Custom Styles list. Locate the file and select it. Now it will appear in your Styles dropdown selection and you can optionally make it the default window style.

Custom Styles are added to the keyboard menu under Command-Opt-#, where # is 1-9 in the order they’re added.

Creating a Style

I’ve been creating my styles with Compass and Sass. I just turn on compass watch and point Marked to the output CSS file. Turn on “Track CSS Changes” under the Style list in Marked, and every time Compass compiles, Marked will update without refreshing the page (LiveReload-style injection).

The document markup hasn’t changed between v1 and v2 of Marked, so the original style guide still applies. There are just a few things to worry about for full compatibility. Inverted styles, poetry mode and print settings. However, submissions that lack any of these are still accepted, as people can add their own if they need to.

The one thing your Style does need (aside from looking great in Marked), is the header.css information, customized to your Style. Just stick it at the top.

I prefer to Base 64 encode any custom fonts in order to make the Stylesheet a single-file download with no online requirements. If you can make it work other ways, I’m open to folder downloads, etc. Eventually I plan to create a bundle format for them.

Thanks, and I hope you’ll consider sharing the custom styles you create, even if they’re revisions and evolutions of existing styles!