Code syntax highlighting with syntaxp via the CSS Custom Highlight API. Zero runtime dependencies. No extra elements in the DOM. Light and dark mode. (Read the announcement and try it in your project.)
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<title>My Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p class=intro>Welcome.</p>
</body>
</html># Getting Started
Install the package with `npm install example`, then read the **usage**
guide or check the _API reference_.
> Requires support for the Amazing API.
* Zero dependencies
* Zero maintenance
* [Read the docs](https://example.com/)/* Reset */
*,
*::before,
*::after {
box-sizing: border-box;
margin: ;
padding: ;
}
body {
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #1a1a1a;
background-color: #ffffff;
}
.container {
max-width: 800px;
margin: auto;
padding: 2rem;
}// Fetch and display user data
async function fetchUser(id) {
try {
const response = await fetch(`/api/users/${id}`);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const user = await response.json();
console.log(`User: ${user.name}`);
return user;
} catch (err) {
console.error("Failed to fetch user:", err.message);
return null;
}
}
const app = {
name: "My App",
version: "1.0.0",
init() {
console.log(`${this.name} v${this.version} initialized`);
}
};
export default app;interface User {
id: number;
name: string;
email: string;
role: "admin" | "user" | "guest";
}
async function getUsers<T extends User>(
limit: number = 10
): Promise<T[]> {
const res = await fetch(`/api/users?limit=${limit}`);
const json = await res.json();
return json.data as T[];
}
export { getUsers };
export type { User };# Fetch and display user data
import json
from urllib.request import urlopen
class UserError(Exception):
pass
def fetch_user(user_id: int) -> dict:
with urlopen(f"https://example.com/api/users/{user_id}") as response:
if response.status != 200:
raise UserError(f"HTTP {response.status}")
return json.load(response)
def main():
user = fetch_user(42)
print(f"User: {user['name']}")
if __name__ == "__main__":
main()# Install dependencies
npm install
# Run development server
npm run dev -- --port 3000
# Build for production
NODE_ENV=production npm run build
# Deploy to server
ssh deploy@server.example.com "cd /var/www && git pull && pm2 restart app"{
"name": "My App",
"version": "1.0.0",
"private": true,
"scripts": {
"build": "node scripts/build.mjs",
"test": "node --test"
},
"dependencies": {
"esbuild": "^0.28.1"
},
"strict": true,
"legacy": false,
"proxy": null
}# Deployment config
name: My App
version: 1.0.0
private: true
env:
- NODE_ENV=production
- PORT=3000
build:
command: "npm run build"
output: dist/
retries: 3SELECT customers.name, COUNT(orders.id) AS order_count
FROM customers
INNER JOIN orders ON orders.customer_id = customers.id
WHERE orders.created_at >= '2026-01-01'
GROUP BY customers.name
ORDER BY order_count DESC
LIMIT 10;{# Render a list of active users #}
{% for user in users %}
{% if user.active %}
<li>{{ user.name | upper }}</li>
{% endif %}
{% endfor %}
{% set greeting = "Hello, " ~ user.name ~ "!" %}
{{ greeting }}diff --git a/syntaxp.js b/syntaxp.js
index 1a2b3c4..5d6e7f8 100644
--- a/syntaxp.js
+++ b/syntaxp.js
@@ -14,6 +14,7 @@ const languages = {
html: [ … ],
css: [ … ],
+ json: [ … ],
js: [ … ]
};GET /api/users/42 HTTP/1.1
Host: example.com
Authorization: Bearer abc123
Accept: application/json
HTTP/1.1 200 OK
Content-Type: application/json
Cache-Control: no-store
{"id": 42, "name": "Ada"}# Redirect to HTTPS and compress text assets
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
</IfModule>
Header always set X-Content-Type-Options "nosniff"
AddOutputFilterByType DEFLATE text/html text/css application/javascript
ExpiresActive On
ExpiresByType text/css A129600
ExpiresByType text/html A10“Use console.log("hello") for debugging”, “enter npm install to install.”