Styling Guide
Learn how to customize svelte-rune-highlight components using CSS variables, custom classes, and Tailwind CSS
Overview
svelte-rune-highlight is a CSS framework-free library. You can customize it using CSS custom properties (variables), custom classes, or Tailwind CSS utilities. All components are designed to work seamlessly with any styling approach.
1. CSS Custom Properties (Recommended)
The easiest way to customize components globally is through CSS variables. Add these to your global stylesheet:
Available CSS Variables
| Variable | Default | Description |
|---|---|---|
| --code-padding | 1rem | Padding inside code blocks |
| --code-font-family | 'Fira Code', monospace | Font family for code |
| --code-font-size | 0.875rem | Font size for code text |
| --code-line-height | 1.5 | Line height for code |
| --langtag-background | rgba(0, 0, 0, 0.1) | Language tag background |
| --langtag-color | currentColor | Language tag text color |
| --highlighted-background | rgba(254, 241, 96, 0.2) | Highlighted line background |
| --line-number-color | currentColor | Line number color |
2. Custom Classes
Pass custom classes to components for specific styling:
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}<script>
import { HighlightCompo } from '$lib';
const code = `function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}`;
</script>
<HighlightCompo {code} lang="javascript" class="custom-code-block" />
<style>
:global(.custom-code-block) {
border: 2px solid #667eea;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
</style>
💡 Tip: Use :global() in Svelte to style components from parent scopes.
3. Tailwind CSS Utilities
If your project uses Tailwind CSS, you can leverage its utility classes for quick styling. Define reusable component classes:
Usage Examples
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}<script>
import { HighlightCompo } from '$lib';
const code = `function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}`;
</script>
<!-- Modern bordered style -->
<HighlightCompo {code} lang="javascript" class="code-block-modern" />
<!-- Or use utilities directly -->
<!-- <HighlightCompo
{code}
lang="javascript"
class="rounded-xl border-2 border-blue-500 shadow-2xl"
/> -->
4. Highlight.js Themes
Change syntax highlighting colors by importing different highlight.js themes:
Popular themes: github-dark, atom-one-dark, monokai, nord
Live Examples
Tailwind: Modern Bordered
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}<script>
import { HighlightCompo } from '$lib';
const code = `function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}`;
</script>
<div class="theme-modern">
<HighlightCompo {code} lang="javascript" class="rounded-xl border-2 border-blue-500 shadow-2xl" />
</div>
<style>
.theme-modern {
--code-padding: 1.5rem;
--code-font-family: 'JetBrains Mono', monospace;
}
</style>
Tailwind: Card Style
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}<script>
import { HighlightCompo } from '$lib';
const code = `function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}`;
</script>
<HighlightCompo {code} lang="javascript" class="rounded-lg bg-white shadow-lg ring-1 ring-gray-200 dark:bg-gray-900 dark:ring-gray-800" />
Tailwind: Gradient Border
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}<script>
import { HighlightCompo } from '$lib';
const code = `function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}`;
</script>
<div class="rounded-2xl bg-gradient-to-br from-purple-500 to-pink-500 p-1">
<HighlightCompo {code} lang="javascript" class="overflow-hidden rounded-xl" />
</div>
CSS Variables: Purple Theme
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}<script>
import { HighlightCompo } from '$lib';
const code = `function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}`;
</script>
<div class="theme-purple">
<HighlightCompo {code} lang="javascript" class="purple-theme" />
</div>
<style>
.theme-purple {
--code-padding: 1.5rem;
--code-font-family: 'JetBrains Mono', 'Fira Code', monospace;
--langtag-background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--langtag-color: white;
--langtag-padding: 0.5rem 1rem;
--langtag-border-radius: 0.5rem;
}
:global(.purple-theme) {
border: 2px solid #667eea;
border-radius: 0.75rem;
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
overflow: hidden;
}
</style>
CSS Variables: Retro Terminal
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}<script>
import { HighlightCompo } from '$lib';
const code = `function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}`;
</script>
<div class="theme-retro">
<HighlightCompo {code} lang="javascript" class="retro-theme" />
</div>
<style>
.theme-retro {
--code-padding: 1.5rem;
--code-font-family: 'Courier New', monospace;
--code-font-size: 0.875rem;
--code-line-height: 1.6;
--langtag-background: #00ff00;
--langtag-color: #000;
--langtag-text-transform: uppercase;
}
:global(.retro-theme) {
background: #000;
color: #00ff00;
border: 2px solid #00ff00;
border-radius: 0;
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
font-family: 'Courier New', monospace;
}
:global(.retro-theme code) {
color: #00ff00 !important;
}
</style>
Built-in CSS Classes
The library includes several built-in CSS classes you can override:
| Class Name | Used In | Purpose |
|---|---|---|
| .hlc-base | HighlightCompo | Base container styling |
| .hlc-warning | All components | Warning messages in DEV mode |
| .hlc-error | HighlightSvelte | Error messages |
| .hlc-empty-code | HighlightSvelte | Empty code message |
| .cw-base | ExampleWrapper | Wrapper container |
| .cw-inner | ExampleWrapper | Inner content area |
When to Use Each Method
CSS Custom Properties
Best for:
- Global theming across entire site
- Dynamic theme switching
- Framework-agnostic projects
- Fine-tuned control over properties
Tailwind CSS
Best for:
- Quick prototyping and iteration
- Consistent spacing and sizing
- Responsive designs
- Modern effects (shadows, gradients)
Custom Classes
Best for:
- Component-specific styling
- Complex animations
- Unique design requirements
- Reusable component patterns
Highlight.js Themes
Best for:
- Syntax highlighting colors
- Pre-made color schemes
- Matching IDE themes
- Quick theme changes