Custom CSS

Personalize your preview with custom styles

AnySlate allows you to add custom CSS to style the preview pane exactly how you want. Change fonts, colors, spacing, and more to match your preferences or brand guidelines.

Available on Hobby and Pro plans

Custom CSS styling is available for Hobby ($30/year) and Professional ($60/year) plans. View pricing

Where to Add Custom CSS

Settings → Appearance → Custom CSS

1Open Settings with ⌘/Ctrl + ,
2Navigate to the "Appearance" tab
3Scroll down to "Custom CSS"
4Enter your CSS and save

Changes apply immediately to the preview pane. Your CSS is saved and persists across sessions.

What You Can Style

Typography

Font family, size, weight, line height, letter spacing

Colors

Text color, backgrounds, links, code blocks

Spacing

Margins, padding, paragraph spacing

Code Blocks

Syntax highlighting colors, backgrounds, borders

CSS Selector Reference

Element	Selector
Preview container	`.preview-content`
Headings (all)	`.preview-content h1, h2, h3...`
Paragraphs	`.preview-content p`
Links	`.preview-content a`
Code blocks	`.preview-content pre`
Inline code	`.preview-content code`
Blockquotes	`.preview-content blockquote`
Lists	`.preview-content ul, ol`
Tables	`.preview-content table`
Images	`.preview-content img`

Example CSS Snippets

Copy and customize these examples to get started:

Custom Font

Use a custom font for the preview

/* Custom preview font */
.preview-content {
  font-family: 'Georgia', serif;
  font-size: 18px;
  line-height: 1.8;
}

Dark Code Blocks

Style code blocks with a dark theme

/* Dark code blocks */
.preview-content pre {
  background: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 16px;
}

.preview-content code {
  color: #d4d4d4;
}

Custom Heading Colors

Add accent colors to headings

/* Colored headings */
.preview-content h1 {
  color: #ff6b6b;
  border-bottom: 2px solid #ff6b6b;
  padding-bottom: 8px;
}

.preview-content h2 {
  color: #4ecdc4;
}

Better Blockquotes

Style blockquotes with a colored border

/* Styled blockquotes */
.preview-content blockquote {
  border-left: 4px solid #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  padding: 12px 20px;
  margin: 20px 0;
  border-radius: 0 8px 8px 0;
}

Custom Link Style

Make links stand out more

/* Custom links */
.preview-content a {
  color: #ff6b6b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}

.preview-content a:hover {
  border-color: #ff6b6b;
}

Preview-Only Styles

Custom CSS only affects the preview pane, not the code editor. This means you can:

Use any font without affecting editor performance
Create complex styling without impacting editing
Preview exactly how your content will look when exported
Test different styles without modifying your Markdown

Tips & Best Practices

Use specific selectors

Always prefix selectors with .preview-content to avoid affecting other parts of the UI.

Test in both themes

Make sure your custom CSS looks good in both light and dark modes. Use CSS variables for theme-aware colors.

Keep a backup

Save your custom CSS in a separate file so you can easily restore it if needed.

Need to start over?

Clear the Custom CSS field in Settings to reset to the default styles. You can also use the "Reset to Defaults" button in the Appearance settings.

Learn about Themes