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 Themes

Create and manage your own custom CSS themes that persist across all workspaces.

Available Commands:

• Create Custom Theme: Create a new custom theme with a CSS template
• List Custom Themes: View all custom themes with options to apply, edit, or delete
• Edit Custom Theme: Open an existing custom theme for editing
• Delete Custom Theme: Remove a custom theme

How to use:

1. Run "MarkdownPreviewStyleChanger: Create Custom Theme" from the Command Palette.
2. Enter a theme name (letters, numbers, hyphens, underscores only).
3. Edit the CSS in the opened editor and save.
4. The theme is automatically saved to your user directory.
5. To apply, run "MarkdownPreviewStyleChanger: List Custom Themes" and select "Apply Theme".

🔧 Workspace 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. Workspace 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.