Code Blocks

Syntax highlighting with titles, line numbers, markers, themes, and diff support

Code Blocks

Code blocks provide server-side syntax highlighting powered by Phiki with 200+ language grammars and dual light/dark theme support.

Basic Syntax

```javascript
const greeting = 'Hello, World!';
console.log(greeting);
```
Markdown
const greeting = 'Hello, World!';
console.log(greeting);
JAVASCRIPT

Title / Filename

app.jsJavaScript
import express from 'express';
const app = express();
app.listen(3000);

```js title="app.js"
code here
```
Markdown

Line Numbers

 1<?php
 2namespace App\Services;
 3
 4class UserManager
 5{
 6    public function find(int $id): ?User
 7    {
 8        return User::find($id);
 9    }
10}
PHP

Start from a custom line:

42public function update(int $id, array $data): bool
43{
44    $user = $this->find($id);
45    return $user?->update($data) ?? false;
46}
PHP

Line Highlighting

Mark (neutral)

const config = loadConfig();
const server = createServer();
server.use(cors());
server.use(json());
server.use(helmet());
server.listen(3000);
JavaScript

Insertions and Deletions

const old = require('old-lib');
// transition period
import { newLib } from 'new-lib';
JavaScript

Line Focus

import os
def get_database_url():
    """Read database URL from environment."""
    return os.environ.get('DATABASE_URL', 'sqlite:///db.sqlite3')

if __name__ == '__main__':
    print(get_database_url())
PYTHON

Text Markers

const greeting = 'Hello, World!';
// Replace placeholder with actual value
console.log(greeting);
JavaScript

Line Wrap

curl -X POST https://api.example.com/v1/users -H "Content-Type: application/json" -H "Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIn0" -d '{"name": "John Doe", "email": "john@example.com"}'
Bash

Per-Block Theme Override

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)
PYTHON

Diff Syntax

 const http = require('http');
 const server = http.createServer();
 import { createServer } from 'node:http';
 const server = createServer();
 server.listen(3000);
Diff

Hide Header

const minimal = true;

Hide Language Badge

utils.js
export function clamp(val, min, max) {
    return Math.min(Math.max(val, min), max);
}

Custom CSS Class

.highlight { background: yellow; }
CSS

Combined Features

server.tsTypeScript
 1import { Hono } from 'hono';
 2
 3const app = new Hono();
 4app.use('*', cors());
 5app.use('*', logger());
 6
 7app.get('/health', (c) => c.json({ ok: true }));
 8
 9export default app;

Supported Languages

Language Identifier Language Identifier
JavaScript js TypeScript ts
PHP php Python py
HTML html CSS css
Bash bash SQL sql
JSON json YAML yaml
Go go Rust rust
Java java C# csharp

And 200+ more via Phiki's TextMate grammar support.