Image reference pane with CSS in Marked

If you write in Markdown on a Mac, then you simply must get Marked, the best way to preview what you’ve written.

I use Marked constantly . Sometimes when I’m writing something in Markdown that has a lot of images, I have to keep flipping back and forth between my text editor and Marked to see which image I’m referring to. This can get annoying if you have limited screen space, or when you’re referencing external images (because each time you flip back to Marked it reloads those images)

So I wrote this CSS which allows you to display all images in the document without any text, in a sort of reference pane style. The great thing about Marked is you can easily switch between CSS styles in the bottom left. It also displays where you last edited in the document with a thin red line on the left, which is uber-handy when you can’t see the text!

Download the css.

To use this, place it in the directory that you get to when you click “Reveal” in the preferences:

Then click the + to add a new custom CSS style, and add the “just images” style.