# Code gallery
Filename blocks and tabs share a header with the language and Copy. Every example remains readable without JavaScript.
## Mixed-language tabs
```ts
// A typed greeting
export function greet(name: string): string {
return `Hello ${name}`;
}
const ready = true;
const count = 42;
```
```sh
#!/bin/sh
printf '%s\n' 'Hello NetScript'
```
```jsonc
// App configuration
{ "tasks": { "start": "deno run main.ts" } }
```
## Filename block
```typescript
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:
```tsx
import { CodeBlock } from '@/components/ui/code-block.tsx';
export default function SourceExample() {
return ;
}
```
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
```tsx
// routes/index.tsx
export function Greeting({ name }: { name: string }) {
return Hello {name}
;
}
```
## Shell
```sh
# scripts/check.sh
printf '%s\n' 'ready'
```
## Python
```python
# scripts/greet.py
class Greeting:
def say(self, name: str) -> str:
return f"Hello {name}"
ready = True
count = 42
```
## PowerShell
```powershell
# scripts/check.ps1
$ready = $true
Write-Output "Hello NetScript"
```
## JSON with comments
```jsonc
// deno.json
{ "tasks": { "check": "deno check main.ts" }, "ready": true, "count": 42 }
```
## Markdown
```markdown
# Readable docs
A **strong** statement and a [link](https://example.com).
```
## Environment
```dotenv
# Local app configuration
APP_NAME="NetScript"
READY=true
COUNT=42
```
## YAML
```yaml
# App configuration
name: NetScript
ready: true
count: 42
```
## CSS
```css
/* A content layout */
.content { display: grid; gap: 1rem; }
```
## Diff
```diff
--- before.ts
+++ after.ts
@@ -1 +1 @@
-export const ready = false;
+export const ready = true;
```
## SQL
```sql
-- Find recent users
SELECT name, created_at FROM users WHERE active = true LIMIT 42;
```
## HTML
```html
Hello NetScript
```
## XML
```xml
Hello NetScript
```