CodeDisplay Web Component
Bundled version with highlight.js and 22 themes included — works offline!
Note: All syntax highlighting and themes are self-contained — no external CDN required.
Theme Selector
Choose from 22 bundled themes (14 dark, 8 light):
JavaScript Example
Python with Line Highlighting
CSS Example
Inline Code Examples
Code can be included directly in the HTML — no JavaScript required:
Inline JavaScript
// Inline code is automatically dedented
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));
Inline HTML (escaped)
HTML content uses escaped entities (< for <):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Page</title>
</head>
<body>
<div class="container">
<h1>Welcome</h1>
<p>This is inline HTML code.</p>
</div>
</body>
</html>
Inline SQL
SELECT
users.name,
COUNT(orders.id) AS order_count
FROM users
LEFT JOIN orders ON orders.user_id = users.id
WHERE users.created_at > '2024-01-01'
GROUP BY users.id
ORDER BY order_count DESC
LIMIT 10;
API
CodeDisplay.getAvailableThemes() → array of theme IDs
CodeDisplay.getThemeInfo() → { id: { name, dark } }