Custom Styles

View your documents your way.

Using custom styles

Add custom stylesheets to Marked using the Marked 2 Preferences (⌘,), Style pane. Styles will be named based on the base filename of the CSS file added. New styles will be added to the dropdown menus in Window preferences and on each window. 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.

Additional CSS

Under Marked 2 Preferences (⌘,), in the 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 Creating Custom CSS for details.


Search | Support Site | Knowledgebase