Code gallery

Filename blocks and tabs share a header with the language and Copy. Every example remains readable without JavaScript.

Mixed-language tabs

src/greeting.ts TypeScript

TypeScriptsrc/greeting.tsTypeScript

// A typed greeting
export function greet(name: string): string {
  return `Hello ${name}`;
}
const ready = true;
const count = 42;

Shellscripts/start.shShell

#!/bin/sh
printf '%s\n' 'Hello NetScript'

JSONdeno.jsonJSON with comments

// App configuration
{ "tasks": { "start": "deno run main.ts" } }

Filename block

services/users.contract.tsTypeScript

export interface User {
  name: string;
}
export const limit = 42;

Fresh UI source files

Install the application component with netscript ui:add code-block. Hydrate it in a Fresh island to enable file selection and clipboard feedback:

TypeScript

import { CodeBlock } from '@/components/ui/code-block.tsx';

export default function SourceExample() {
  return <CodeBlock
    tabs={[
      { value: 'contract', label: 'users.contract.ts', lang: 'TypeScript', code: 'export const limit = 42;' },
      { value: 'command', label: 'check.sh', lang: 'Shell', code: 'deno task check' },
    ]}
    lineNumbers
    footer
  />;
}

Arrow keys follow the page direction; Home and End select the first and last file. Tab reaches Copy and the native code scroll region. Copy writes the selected file's raw source. Diff rows accept variant: 'added' | 'removed' | 'highlighted'; their visible signs supplement color, and the header reports additions and deletions. Without an explicit code, copied diff text excludes removed rows. Plain source is escaped; trusted syntax slots can use CodeBlock.Token without a bundled parser. header={false} preserves file tabs while hiding optional header chrome.

TypeScript

routes/index.tsxTypeScript

// routes/index.tsx
export function Greeting({ name }: { name: string }) {
  return <p>Hello {name}</p>;
}

Shell

scripts/check.shShell

# scripts/check.sh
printf '%s\n' 'ready'

Python

scripts/greet.pyPython

# scripts/greet.py
class Greeting:
    def say(self, name: str) -> str:
        return f"Hello {name}"
ready = True
count = 42

PowerShell

scripts/check.ps1PowerShell

# scripts/check.ps1
$ready = $true
Write-Output "Hello NetScript"

JSON with comments

deno.jsonJSON with comments

// deno.json
{ "tasks": { "check": "deno check main.ts" }, "ready": true, "count": 42 }

Markdown

# Readable docs

A **strong** statement and a [link](https://example.com).

Environment

# Local app configuration
APP_NAME="NetScript"
READY=true
COUNT=42

YAML

# App configuration
name: NetScript
ready: true
count: 42

CSS

/* A content layout */
.content { display: grid; gap: 1rem; }

Diff

--- before.ts
+++ after.ts
@@ -1 +1 @@
-export const ready = false;
+export const ready = true;

SQL

-- Find recent users
SELECT name, created_at FROM users WHERE active = true LIMIT 42;

HTML

<article class="content"><h1>Hello NetScript</h1></article>

XML

<message ready="true">Hello NetScript</message>