Creating custom styles for Marked 2 is pretty easy… if you know CSS. I’ve started work on building an actual templating system, but it hasn’t come to fruition yet. In the meantime, I present styleStealer, a bookmarklet to make grabbing a site’s design and applying it to your Markdown preview in Marked a simple process.

To use it, just drag the bookmarklet below to your bookmarks/favorites bar (tested in Safari and Chrome).

styleStealer

When you’re on a page that contains a section of content you want to match the style of (usually a blog post or article):

  1. Click the bookmark.
  2. When a blue bar appears across the top of the page, you’ll be in inspection mode. Hovering over elements will outline the closest container elements, and show their selector at the top of the screen.
  3. Click a container that holds the entire article but not any sidebars or excess cruft.
  4. Watch a stylesheet magically appear.
  5. Click the text once to select all, then copy and paste into a text file. Save as “[site name].css”.
  6. In Marked > Preferences > Style, click the plus sign under the custom style list and locate your new css file.
  7. Make sure you’ve selected the new style in the style picker on a preview window to check it out!

It’s not 100% perfect on all sites as there are a lot of variables to deal with when trying to detect and replicate styling using JavaScript alone. But in my testing it’s been pretty awesome.

YouTube Video

A few notes, mostly for my own documentation:

  • Recent security changes in WebKit make it difficult to parse styles via JavaScript on most pages. styleStealer uses XHR requests to reload cross-domain stylesheets.
  • The script uses computed rules for most styles, parsing stylesheets mostly for imports/webfonts.
  • When a container is chosen, it injects standard elements into the selected container and then reads their applied styles.
  • It reads only style rules relevant to display in Marked, creating a relatively simple stylesheet.
  • Output is specifically formatted to be a stylesheet in Marked, meaning:
    • Selectors are previxed with Marked’s #wrapper container ID for specificity
    • Standard comment header is added to the top

    The #wrapper prefix is added when the styleStealer.steal() function is called, and is easily removed. All extra text is contained in heredocs in the script and is easily editable.

Come up with a great one that would be useful to others? Feel free to add it here or contact me with it.