JavaScript
{{{ hl(`console.log("💚 Simple is beautiful!");`) }}}
```
```ts [nitro.config.ts]
import { defineConfig } from "nitro";
export default defineConfig({
serverDir: "./",
});
```
```json [package.json]
{
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build"
},
"devDependencies": {
"nitro": "latest",
"shiki": "^3.22.0"
}
}
```
```css [styles.css]
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #f6f8fa;
font-family:
system-ui,
-apple-system,
"Segoe UI",
Roboto,
"Helvetica Neue",
Arial,
"Noto Sans",
"Liberation Sans",
sans-serif;
}
.card {
text-align: left;
background: #0b1220;
color: #e6edf3;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(2, 6, 23, 0.2);
max-width: 90%;
width: 520px;
}
.label {
font-size: 12px;
color: #9aa7b2;
margin-bottom: 8px;
}
pre {
margin: 0;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
font-size: 14px;
background: transparent;
white-space: pre;
overflow: auto;
}
```
```json [tsconfig.json]
{
"extends": "nitro/tsconfig"
}
```
```ts [vite.config.ts]
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";
export default defineConfig({
plugins: [nitro()],
});
```
```ts [api/highlight.ts]
import { createHighlighterCore } from "shiki/core";
import { createOnigurumaEngine } from "shiki/engine/oniguruma";
const highlighter = await createHighlighterCore({
engine: createOnigurumaEngine(import("shiki/wasm")),
themes: [await import("shiki/themes/vitesse-dark.mjs")],
langs: [await import("shiki/langs/ts.mjs")],
});
export default async ({ req }: { req: Request }) => {
const code = await req.text();
const html = await highlighter.codeToHtml(code, {
lang: "ts",
theme: "vitesse-dark",
});
return new Response(html, {
headers: { "Content-Type": "text/html; charset=utf-8" },
});
};
```