MarkdownPreviewStyleChanger

A VS Code extension that provides a side-by-side Markdown preview with extensive customization options. Choose from 40 built-in themes, apply unique heading decorations, and customize the font family to create your perfect writing environment.

Features

🎨 40 Built-in Themes

Choose from a wide variety of themes to match your mood or coding style. All themes include matching table styles.

Light Themes:

• Simple
• Solarized Light Like
• GitHub Light Like
• Quiet Light Like
• Light+ Like
• Candy Like
• Macaron Like
• Hygge Like
• Minimal Like
• Notebook Like
• Watercolor Like

Dark Themes:

• Monokai Like
• Dracula Like
• GitHub Dark Like
• Solarized Dark Like
• Night Owl Like
• Abyss Like
• High Contrast Like
• Material Theme Like
• American Like
• Retro Like
• Livehouse Like
• Punk Like
• Heavy Metal Like
• Flesh Like
• Tranquility Like
• Antique Like
• Block Like
• Chusei Like
• Dialy Like
• Digital Console Like
• Indastrial Like
• Marine Like

🏷️ Heading Decorations

Visually differentiate heading levels with configurable styles:

• Underline: Varying thickness for H1-H3.
• Label: Sticker-like appearance.
• Rugged: Bold, industrial look.
• Feminine: Soft, elegant styling.
• Notebook: Ruled paper effect.
• None: Standard markdown headings.

🔤 Font Customization

Set your preferred font family for the preview.

🔧 Custom CSS

You can fully customize the preview appearance by creating a CSS file in your workspace.

1. Create a file named .vscode/markdown-preview-styles.css in your project root.
2. Add your custom CSS rules.
3. Important: Set markdownPreviewStyleChanger.theme to none in your settings. Custom CSS is only applied when the theme is set to none.

Example: .vscode/markdown-preview-styles.css

/* Change background and text color */
body {
    background-color: #ffffff;
    color: [#333333](https://github.com/d-tools-lab/markdown-preview-style-changer/issues/333333);
    font-size: 16px;
}

/* Customize code blocks */
pre {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Style blockquotes */
blockquote {
    border-left: 4px solid #42b983;
    color: #6a737d;
    background-color: #f8f8f8;
    padding: 10px;
}

Usage

1. Open a Markdown file.
2. Run the command "MarkdownPreviewStyleChanger: Open Preview" from the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) or click the preview button.
3. Customize the appearance in Settings (Ctrl+, / Cmd+,):
   • markdownPreviewStyleChanger.theme: Select a color theme.
   • markdownPreviewStyleChanger.headingStyle: Select a heading decoration style.
   • markdownPreviewStyleChanger.fontFamily: Enter your desired font family.

Extension Settings

This extension contributes the following settings:

• markdownPreviewStyleChanger.theme: Select the color theme for the preview.
• markdownPreviewStyleChanger.headingStyle: Select the decoration style for headings.
• markdownPreviewStyleChanger.fontFamily: Specify the font family for the preview.

Release Notes

0.0.1

Initial release with 40 themes, 5 heading styles, and font customization.