Custom Styles
View your documents your way.
Using custom styles
The easiest way to explore Custom Styles is through the Custom Style Gallery. From there you can browse the available styles in action, install them with the click of a button, and even submit your own creations for inclusion.
To add custom stylesheets from your local drive to Marked, use the . 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. If they move on your drive, they’ll be removed from Marked until you add them again from the new location. It’s a good idea to close open documents and remove the style from Preferences before deleting or renaming a CSS file used by Marked. It won’t break anything if you don’t, but it saves some confusion.
You can find additional styles for use (or as examples for creating your own) on GitHub (see the examples for a quick peek at what’s there). See Creating Custom CSS for details and tips.
Additional CSS
Under the , 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 in the Custom Styles section of the 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.
This is also useful for some basic web design work and CSS experimentation (like creating custom styles). Load a Markdown file containing all the markup you want to style for, create a custom style, and watch the preview for live changes as you edit it.
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. Any time you create something new, consider submitting it to the gallery to share with other users. Be sure to cover the basics listed in the guide, and include the metadata comment at the top.
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.
Next up: Custom Processor ▶
Search | Support Site | Knowledgebase | Legal | Privacy | Twitter