WBY Midnight Folio

Markdown preview styling by wby.

A dark stylesheet for the built-in Visual Studio Code Markdown preview, with warm text, serif headings and restrained yellow and blue accents.

Features

• Dark blue-gray canvas with a subtle blue gradient.
• Centered 40px first-level headings with a yellow brush underline.
• Distinct heading levels: 32px H2, 26px H3 and 22px H4; 16px body text.
• Rounded quotation cards, a three-dot code toolbar and dashed separators.
• Coordinated tables, inline code, task lists, math containers and image styling.
• Wider reading column with balanced spacing across preview pane sizes.

This extension contributes CSS only. It includes no JavaScript entry point, runtime dependencies, telemetry, remote stylesheets or bundled fonts. It styles the preview and does not edit Markdown files or change the editor's color theme.

Installation

Search for WBY Midnight Folio in the VS Code Extensions view, or run:

code --install-extension wby-shu-edu-china.wby-midnight-folio

Usage

1. Enable the extension in the active VS Code profile.
2. Open a Markdown file.
3. Run Markdown: Open Preview from the Command Palette, or press Ctrl+Shift+V on Windows/Linux and Shift+Cmd+V on macOS.

No markdown.styles setting is required. Reopen the preview after installation. If an existing window still shows the previous style, run Developer: Reload Window.

Remote development and profiles

For Remote SSH, WSL or Dev Containers, install the extension in the environment that hosts the Markdown file. In a connected remote window, use the extension's Install in SSH / WSL / Container action when available, or install the VSIX into that environment.

Extensions are enabled per VS Code profile. When creating another profile, include this extension or copy it from an existing profile.

Compatibility

• Targets VS Code's built-in Markdown preview. Markdown Preview Enhanced and other independent renderers use their own styles.
• Native code highlighting and copy controls remain available; token colors can vary with VS Code's syntax theme.
• Uses installed system fonts. Serif and CJK typography may differ across operating systems.
• Other preview-style extensions and markdown.styles entries may override these rules. Disable competing styles when troubleshooting.
• A dark preview is not optimized for paper printing.

Attribution and license

Adapted from Esther Design System, by ESTHER不二 (esthersjw). Changes include the dark palette, heading hierarchy, quote and code-block treatments, responsive layout, and VS Code preview integration.

Distributed under CC BY-NC-SA 4.0. Redistribution and adaptation must preserve attribution, remain noncommercial and use the same license. This is an independent adaptation; source attribution does not imply author endorsement or permission to use the author's identity or brand. See the bundled LICENSE and NOTICE.md for details.

中文说明

为 VS Code 内置 Markdown 预览提供深蓝灰背景、暖灰正文、衬线标题及黄色和蓝色点缀。1.0.1 起扩大正文区域，将原有左右留白分别减半，并保持居中布局。

安装后打开 .md 文件，按 Ctrl+Shift+V 查看；macOS 使用 Shift+Cmd+V。无需额外设置 markdown.styles。如果样式未刷新，可重新打开预览，或执行 Developer: Reload Window。

使用 SSH、WSL 或开发容器时，需要在相应远程环境安装。扩展按 VS Code 配置文件（Profile）启用，新建 Profile 时需包含此扩展。此扩展适用于内置预览，不适用于 Markdown Preview Enhanced 的独立渲染器。

衍生自 ESTHER不二 (esthersjw) 的设计系统，遵循 CC BY-NC-SA 4.0：保留署名、禁止商业用途、改作使用相同协议。来源署名不代表原作者背书，也不授予姓名、品牌或身份标识的使用权。