Get started in seconds! Just copy and paste the script tag below into your HTML body.
<script
src="https://cdn.jsdelivr.net/gh/vespaiach/highlight-it@main/dist/highlight-it.js"
defer></script>
Add the script tag in your at the end of your HTML <body> tag
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!-- Your code will be automatically highlighted -->
<pre><code class="language-javascript">
function hello() {
console.log('Hello, World!');
}
</code></pre>
<!-- Add highlight-it here -->
<script src="https://cdn.jsdelivr.net/gh/vespaiach/highlight-it@main/dist/highlight-it.js" defer></script>
</body>
</html>Choose from 40+ beautiful themes for both light and dark modes. Copy the configuration that suits your style.
Note:both light and dark mode themes are optional, you can choose to use one or both.
<script
src="https://cdn.jsdelivr.net/gh/vespaiach/highlight-it@main/dist/highlight-it.js?theme=prism&darkMode=okaidia"
defer></script>Note: toggle your system dark mode to see both themes
// Async/await example with error handling
async function fetchUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching user data:', error);
return null;
}
}
// Array methods and destructuring
const users = [
{ name: 'Alice', age: 30, role: 'developer' },
{ name: 'Bob', age: 25, role: 'designer' },
{ name: 'Charlie', age: 35, role: 'manager' }
];
const developers = users
.filter(user => user.role === 'developer')
.map(({ name, age }) => ({ name, age }));
console.log(developers); // [{ name: 'Alice', age: 30 }]# Class with decorators and type hints
from typing import List, Optional
from dataclasses import dataclass
@dataclass
class User:
name: str
email: str
age: int
def is_adult(self) -> bool:
"""Check if user is 18 or older."""
return self.age >= 18
# List comprehension with condition
def get_adult_users(users: List[User]) -> List[User]:
return [user for user in users if user.is_adult()]
# Context manager example
with open('data.txt', 'r') as file:
content = file.read()
lines = content.split('\n')
# Dictionary comprehension
user_emails = {user.name: user.email for user in users}/* Modern CSS with custom properties and grid */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
--spacing-unit: 1rem;
--border-radius: 8px;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: calc(var(--spacing-unit) * 2);
padding: var(--spacing-unit);
}
.card {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: var(--border-radius);
padding: calc(var(--spacing-unit) * 1.5);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}
/* Responsive media query */
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Web Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="hero">
<h1>Welcome to My Site</h1>
<p>Building amazing experiences on the web.</p>
</section>
</main>
</body>
</html>