Creating Custom Styles
If you know just enough CSS to be dangerous, you can make Marked look however you like.
Contents
Getting started
There’s a repository for Custom Styles on Github. Feel free to browse, use, and contribute there. If you distribute your theme based on one of the base themes, please feel free to add yourself to the credits as a contributor.
With Marked’s ability to use custom CSS files, the sky’s the limit when customizing your Preview. All CSS3 options that work in Safari will work in Marked. With default Markdown files in Marked there are only a few HTML elements you need to handle; all of the content is in a div with the id of “wrapper”, everything else is determined by your document markup.
If you’re designing for personal use, there are no rules. Turn on CSS tracking with the checkbox below the custom CSS selector and when you edit and save your custom CSS, it will update the preview.
A skeleton theme is available for getting started.
If you’re planning to share your CSS creation, there are a few points you need to cover. First, there are some body classes that need to have styles applied:
Body classes
The following styles must be included in any Marked CSS to be shared. The body classes allow you to target and modify any selector under different preference options.
Inverted
When the user selects , a class of “inverted” is added to the body tag. You can use this to target the high-contrast, light on dark styles.
You only want inverted styles to apply to the preview, not to print, so use a media query (@media screen) to restrict it. The code below is fairly all-purpose and in most cases you can just drop it into your stylesheet for compatibility, but feel free to tweak it.
@media screen {
.inverted, .inverted #wrapper { background:#111 !important }
.inverted p,.inverted td,.inverted li,.inverted h1,.inverted h2,
.inverted h3,.inverted h4, .inverted h5, .inverted h6, .inverted pre,
.inverted code,.inverted th {
color:#eee !important;
}
.inverted a { color:#fff;text-decoration:underline }
#wrapper {
background: transparent;
padding:20px;
}
}
Poetry
The user can choose whether tab-indented text is poetry or code. The only difference is that pre/code blocks are styled more, um, poetically if poetry mode is chosen. The “poetry” class is applied to the body tag.
Get as creative as you like with the formatting, but here’s a basic snippet:
.poetry pre code {
font-family:Georgia, Garamond, serif;
font-style:italic;
font-size:110% !important;
line-height:1.6em;
display:block;
margin-left:1em;
}
Special cases
Tables, Figure/Figcaption, and the special case of a.footnote and div.footnotes>a also need to be considered. There are no set rules on how you handle them, but take a look at the default styles to get an idea what CSS rules Marked needs.
The standard table styling across all of the default styles uses transparency on the alternating rows to make it blend softly with any background. You can copy those styles, or go your own route, just make sure you’ve styled them! Same for figure and figcaption; add an image to a document with alt text to see how the markup will come out and style appropriately.
Footnotes included in a document will render a link within the content (a.footnote), and a div at the end with the referenced text (div.footnotes). Again, see the default styles for reference. To avoid changing the line height on lines containing a footnote reference number, be sure to include something like:
sup,sub,a.footnote {
font-size: 1.4ex;
height: 0;
line-height: 1;
vertical-align: super;
position: relative;
}
To keep the return arrow on the same line, include:
.footnotes p {display:inline}
It’s also a good idea to include a general rule for all images to keep them within the width of the page. Something like:
#wrapper img { max-width: 100% }
If your theme has additional padding or a fixed width, modify the max-width to fit.
Print styles
Be sure to include print styles that remove any background colors, fixed scrolling, etc. Use “@media print” to define them within your theme.
Link-hiding in print is handled outside of the main theme, allowing users to choose to have link highlights and underlines hidden in printout. As long as you have a base style set for the text, you don’t need to worry about this.
So, have at it. Convert your blog theme, create a killer print style for PDF documents, or craft the perfect preview for the style of writing you do. If you make something awesome, let me know and I’ll post it for the whole Marked community.
Additional CSS Preferences
In the , you can edit additional CSS. These styles will be appended to any theme loaded, and can be used to make universal changes to all themes.
Using high specificity and @media queries for print and screen, you can control just about every styling aspect with a bit of CSS knowledge.
Webkit Inspector
Use ⌃⌥I or right click on your preview window and select “Inspect Element” to launch the Webkit Inspector. This is an easy way to see what elements exist and what CSS rules are affecting them. You can even make edits within the Inspector to see how the results will look. See Apple’s Developer Tools documentation for more information on the Webkit Inspector.
Sharing Custom CSS
You can find additional Custom Styles on GitHub. Feel free to submit your own as a pull request or contact Brett directly.
Other tips
Overriding specificity
Within the Marked preview, a body class based on the filename of the current style is added. If the preview is set to “Swiss”, then there will be a class on the <body> tag called mkstyle--swiss. If your custom CSS is called MyCustom.css, then the body class will be mkstyle--mycustom. You can use this before rules defined in the base styles to override them. To get absolute specificity in a rule, use the #wrapper ID from the container div as well:
.mkstyle--mycustom #wrapper p+p { ... }
Table of contents styling
If you use the <!--toc--> token to insert a table of contents, you can override the preferences for Table of Contents level indicators in a Custom Style using the “#wrapper” to increase specificity:
#wrapper #mkreplaced-toc li {
list-style-type: square;
}
This would make all of the list items in the Table of Contents use a square bullet instead of what was set in preferences when your Custom Style is active.
Next up: Per-Document Settings ▶
Search | Support Site | Knowledgebase | Legal | Privacy | Twitter