A drop-in CSS theme for rendered Markdown HTML.
Works with any framework, any renderer, or plain HTML. Two layers of customization let you theme quickly, fine-tune individual elements, or simply keep the default GitHub-like look.

• Why md-juice?
• Installation
• Basic Usage
• Theming
• Transitions
• Tailwind Compatibility
• Syntax Highlighting

Quickly style Markdown HTML with conflict-free, framework-agnostic CSS.

Use cases: Docs, blogs, wikis, notes apps, README previews, static sites
Key benefits: Fast theming, framework-agnostic, conflict-free styling
Features: GitHub-like default style, zero JS, built-in light/dark themes

To get started, install MD-Juice:

npm install @aruidev/md-juice

Import the MD-Juice CSS to your global styles.

@import '@aruidev/md-juice';

These high-level tokens control the overall look and feel:

.md-juice {
  --juice-color-bg: #fefefe;
  --juice-color-text: #2d2a3e;
}

Add dark mode variants in the same CSS file:

.md-juice[data-theme="dark"] {
  --juice-color-bg: #1a1625;
  --juice-color-text: #e4e2f0;
}

These high-level tokens control the overall look and feel.
Set these to theme quickly.

Override only when a specific surface must differ from the fast mapping.

By default MD-Juice uses Tailwind's default transition values (150ms + cubic-bezier(0.4,0,0.2,1)) so it visually blends into projects already using Tailwind.

If the rest of your app (e.g. layout, buttons) uses a different speed/easing and you notice a mismatch, just override after loading the stylesheet.

Set --juice-transition and --juice-transition-timing to match your app:

.md-juice { --juice-transition: 200ms; }
.md-juice { --juice-transition-timing: ease-in-out; }

You can also disable transitions completely:

.md-juice { --juice-transition: 0ms; }

• Works side-by-side with Tailwind.
• MD-Juice styles only the markdown body inside a .md-juice scope.
• Load it after Tailwind if you want MD-Juice to take precedence for Markdown.

• MD-Juice provides only minimal syntax tokens.
• For full dynamic language highlighting, use a syntax highlighter alongside MD-Juice.
• You can still override individual --mdj-syntax-* for custom hues.

Enjoy rapid theming. Issues & PRs welcome.