Custom Styles

View your documents your way.

Using custom styles

Add custom stylesheets to Marked using the Marked 2 Preferences (⌘,), Style pane. New styles will be added to the dropdown menus in Window preferences and on each window, and will be named based on the base filename of the CSS file added. Store your custom CSS files in a safe place on your drive. “Bad Things” may happen if you remove or rename a CSS file while it’s active in Marked. Close windows and remove the style from Preferences when deleting or renaming a CSS file used by Marked.

You can find additional styles for use (or as examples for creating your own) on GitHub (see the examples page for a quick peek at what’s there). See Creating Custom CSS for details and tips.

Additional CSS

Under the Marked 2 Preferences (⌘,), Style pane, you’ll find an option titled Additional CSS with a button labeled “Edit CSS.” Clicking this button opens a window where you can add universal CSS rules that will be applied to all styles. Note that specificity of the rules can be important when overriding some of Marked’s default styling. The main body of the document is wrapped in a div with the id “#wrapper”. Prefixing a selector with this can allow for easier overrides, e.g.:

#wrapper img { width: 100%; height: auto; }

Watching CSS changes

You can check a box below the Custom Styles table to have Marked watch the active CSS file in addition to the Markdown file you’re editing. When changes are detected on either file, the preview will update. This is useful for editing custom styles without constantly refreshing and can also be used for simple web development tasks. You can open straight HTML documents and assign a custom stylesheet, and if you set your custom processor to /usr/bin/php, you can also have PHP files rendered in the preview.

Writing custom CSS

If you’re familiar with CSS, you can create your own style sheets for use in Marked. See Writing Custom CSS for details.

Automatic Custom Styles with StyleStealer

You can even automatically generate a style based on an existing website using the StyleStealer bookmark. This uses Marked’s addstyle URL handler to make a 2-click process out of adding custom styles to Marked.

Search | Support Site | Knowledgebase | Legal | Privacy | Twitter