I’ve updated the StyleStealer bookmarklet that I published a while ago. In addition to a bit more accurate styling, it can now add styles directly to Marked 2 (2.5.11 or newer) without requiring any file saving or manual adding in Marked’s preferences.

This tool is great if you’re on online writer who wants to see how their work will appear on the destination blog or publication. It’s also great if you like to Markdownify articles and be able to read them later with their original look.

(What it’s not great for is stealing other people’s work and using it to publish your own. Let’s not do that.)

Installation

(If you already have StyleStealer installed, it’s already updated. Congratulations.)

To add it to Safari or Firefox, just drag the button below to your bookmarks/favorites bar.

In the latest version of Chrome, you can no longer drag in-page links to the bookmarks bar. This now requires:

  1. Bookmark the current page to the bookmarks bar (CMD-D or click the star in the url bar)
  2. Right click on the bookmarklet button below and choose “Copy Link Address”
  3. Right click on the new bookmark in the bar and select “Edit…”
  4. Change the Name to the bookmarklet name and paste the copied address into the URL field

(StyleStealer may work in additional browsers, these are the ones I’ve tested.)

styleStealer

Note that the bookmarklet is designed for desktop use, because it uses Marked 2’s url handler it won’t be of much use on mobile browsers.

Usage

YouTube Video

On a page with styling you’d like to duplicate:

  1. Click the bookmarklet
  2. The browser enters inspection mode and a blue bar appears across the top of the page.
  3. Hovering over elements will outline the closest container elements, and show their selector at the top of the screen

  4. Click a container that holds the entire article but not any sidebars or excess cruft

    Note: The outline may disappear when you’re over a paragraph, but the best bet for getting the right section is actually to just click the first paragraph of text in the article/post

  5. Enter a name for the style (defaults to the site name) when prompted
  6. Click the “Add to Marked” link that appears

Done!

The style will appear in Marked’s style picker, as well as in the Preferences->Style->Custom CSS list where you can use the “-“ button to remove it.

When you name the style, it gets written to a file called [name].css in Marked’s application support directory. Using the same name again will overwrite the file, which means if the bookmarklet failed to match the style you can try again and update the existing style. If you have a preview window open and that style selected, Marked will even update the preview live to show you whether it worked or not!

As a technical note, the bookmarklet makes use of Marked’s new URL handler method, addstyle. With this method you can add a style from a url-encoded string or from a file on disk. To add an encoded string, use:

x-marked://addstyle/?name=My+Awesome+Style&css=my%20encoded%20style...

To add from a local file, you can use:

x-marked://addstyle/?file=/Users/myuser/styles/My%20Awesome%20Style.css

(If no name parameter is provided with file, the filename will be used.)

This url method will make it easier to share new styles, and eventually (hopefully) for me to build a style-sharing site for people to share their favorites. For now, if you have a great style you want to share, feel free to add it here or contact me to have me share it for you!