The new Marked Custom Style Gallery

I got stressed out on Monday night and couldn’t sleep. Anxiety’s a real gut punch. But I turned it into work on something I’ve been meaning to get to for a long time: I present the Marked 2 Custom Style Gallery (2.0, really, but the first actual finished product).

All of the available styles are in the GitHub repo. But GitHub repos aren’t sexy, and it’s been a poor experience for typical users. The gallery provides a grid view of thumbnails with links to a full theme browser (which I’d built previously). If you’re browsing on your Mac, each thumbnail also has a link to install the style instantly in Marked on the same machine.

I updated some of the styles, adding missing fonts and including dark mode where it was missing. The collection is about 50% comprised of themes I didn’t author, so I didn’t take too many liberties. I converted several of them to Sass and set up the repo with a base Compass setup. Feel free to clone the whole repo and create your style using those tools. Marked can update styling every time a CSS file changes, so you can use tools like compass watch and not have to worry about LiveReload or the like.

In the hopes of expanding the collection, I also created an uploader for people to submit styles for review and inclusion in the gallery. No more having to create a GitHub account to share your custom style with the world. If you’ve created a style for yourself, your blog, or your PDF needs, please share it with the rest of us!

The Details

For anyone interested in the dirt, here’s what I did.

The gallery still runs on the GitHub repo. I commit new styles there, and if I want to include a style in the gallery, it just needs a 640x480 PNG thumbnail in a /previews directory with the same name as the style. A script globs all .css files in the base folder, checks for matching images, then generates the preview gallery and the theme browser. It’s a static setup and requires some manual interaction, but I was going to be curating this anyway.

I made a Retrobatch droplet that lets me sloppily take a screenshot of the theme and scales it to the right width, then crops it to the right aspect ratio (and optimizes it). Takes about a minute to create a new thumbnail from scratch.

In addition to base filenames, the generator script parses the metadata block at the top of Marked Custom Styles, which includes the title, author, and description. Those values are used to generate the static page, but are also saved as a JSON object within the page for access by the various JavaScript functions¹.

The “Install” buttons are based on a feature I’d added to Marked a while back: a URL handler method called /addstyle that allows a URL-encoded string of CSS and a name to be passed, automatically writing the style to the support folder and adding it as a Custom Style in Marked preferences. The page simply calls a tiny CGI script when you click the button, passing the title from the metadata and the style’s filename. The CGI reads the server copy from disk, URL encodes it, and passes back a JSON payload containing the x-marked://addstyle url and parameters. It’s the whole reason I added that feature to begin with, just took me a while to make use of it.

All of the buttons are SVGs, which scale pretty well with the (mostly) responsive layout. The part that took me an extra hour was figuring out how to have a background-image property animate with an SVG. I did it, though. Click the install button (even if you’re just going to hit cancel) and the button will turn into a spinner while the CGI gets the URL. Nifty.

Ok, so give it a whirl, try some styles, and maybe create your own. There are tips for writing custom CSS in the help docs, so be sure to give them a quick skim, and then share your creation with the world!