Code Block
The code-block family renders syntax-highlighted code with shiki. CodeBlock is composable — CodeBlockHeader, CodeBlockTitle, CodeBlockContent, and CodeBlockCopyButton compose inside it, so you can drop your own buttons or a scroll container in the header. MultiFileCodeBlock adds file tabs; LanguageTabsCodeBlock swaps languages with a dropdown and floats the copy button over the code. Highlighting is client-side by default (a loading body is shown first, then shiki is dynamically imported); pass html for the static path. Install the optional peer with pnpm add shiki.
greet.ts
greet.ts
// apps/docs/src/components/examples/code-block/default/react.tsx
import {
CodeBlock,
CodeBlockHeader,
CodeBlockTitle,
CodeBlockContent,
CodeBlockCopyButton,
} from '@cloudvoyant/helical-react';
const code = `export function greet(name: string): string {
return \`Hello, \${name}!\`;
}`;
export default function ReactCodeBlockDefault() {
return (
<CodeBlock code={code} language="ts">
<CodeBlockHeader>
<CodeBlockTitle>greet.ts</CodeBlockTitle>
<div className="ml-auto">
<CodeBlockCopyButton />
</div>
</CodeBlockHeader>
<CodeBlockContent />
</CodeBlock>
);
}<!-- apps/docs/src/components/examples/code-block/default/svelte.svelte -->
<script lang="ts">
import { CodeBlock, CodeBlockHeader, CodeBlockTitle, CodeBlockContent, CodeBlockCopyButton } from '@cloudvoyant/helical-svelte';
const code = `export function greet(name: string): string {
return \`Hello, \${name}!\`;
}`;
</script>
<CodeBlock {code} language="ts">
<CodeBlockHeader>
<CodeBlockTitle>greet.ts</CodeBlockTitle>
<div class="ml-auto">
<CodeBlockCopyButton />
</div>
</CodeBlockHeader>
<CodeBlockContent />
</CodeBlock>Composing a block
CodeBlock provides the code context; the parts read it. The CodeBlockContent accepts an html override for the prerendered path:
<CodeBlock code={code} language="ts">
<CodeBlockHeader>
<CodeBlockTitle>greet.ts</CodeBlockTitle>
<div className="ml-auto">
<CodeBlockCopyButton />
</div>
</CodeBlockHeader>
<CodeBlockContent />
</CodeBlock>Examples
Diff
greet.ts.diff
greet.ts.diff
// apps/docs/src/components/examples/code-block/diff/react.tsx
import { CodeBlock } from '@cloudvoyant/helical-react';
const code = `--- a/src/greet.ts
+++ b/src/greet.ts
@@ -1,4 +1,4 @@
export function greet(name: string): string {
- return \`Hello, \${name}!\`;
+ return \`Hi there, \${name}!\`;
}
`;
export default function ReactCodeBlockDiff() {
return <CodeBlock code={code} language="diff" filename="greet.ts.diff" />;
}<!-- apps/docs/src/components/examples/code-block/diff/svelte.svelte -->
<script lang="ts">
import { CodeBlock } from '@cloudvoyant/helical-svelte';
const code = `--- a/src/greet.ts
+++ b/src/greet.ts
@@ -1,4 +1,4 @@
export function greet(name: string): string {
- return \`Hello, \${name}!\`;
+ return \`Hi there, \${name}!\`;
}
`;
</script>
<CodeBlock {code} language="diff" filename="greet.ts.diff" />Features
ts
ts
// apps/docs/src/components/examples/code-block/features/react.tsx
import { CodeBlock } from '@cloudvoyant/helical-react';
const code = `function fibonacci(n: number): number {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10));`;
export default function ReactCodeBlockFeatures() {
return <CodeBlock code={code} language="ts" showLineNumbers highlightLines={[2, 3]} />;
}<!-- apps/docs/src/components/examples/code-block/features/svelte.svelte -->
<script lang="ts">
import { CodeBlock } from '@cloudvoyant/helical-svelte';
const code = `function fibonacci(n: number): number {
if (n <= 1) return n;
return fibonacci(n - 1) + fibonacci(n - 2);
}
console.log(fibonacci(10));`;
</script>
<CodeBlock {code} language="ts" showLineNumbers highlightLines={[2, 3]} />Language Tabs
sum.ts
TypeScript
Python
Go
C++
Rust
Zig
C#
Haskell
sum.ts
// apps/docs/src/components/examples/code-block/language-tabs/react.tsx
import { LanguageTabsCodeBlock } from '@cloudvoyant/helical-react';
export default function ReactCodeBlockLanguageTabs() {
return (
<LanguageTabsCodeBlock
showLineNumbers
tabs={[
{
label: 'TypeScript',
filename: 'sum.ts',
code: `export function sum(a: number, b: number): number {\n return a + b;\n}`,
language: 'ts',
},
{
label: 'Python',
filename: 'sum.py',
code: `def sum(a: int, b: int) -> int:\n return a + b`,
language: 'python',
},
{
label: 'Go',
filename: 'sum.go',
code: `package main\n\nfunc sum(a, b int) int {\n\treturn a + b\n}`,
language: 'go',
},
{
label: 'C++',
filename: 'sum.cpp',
code: `int sum(int a, int b) {\n return a + b;\n}`,
language: 'cpp',
},
{
label: 'Rust',
filename: 'sum.rs',
code: `fn sum(a: i32, b: i32) -> i32 {\n a + b\n}`,
language: 'rust',
},
{
label: 'Zig',
filename: 'sum.zig',
code: `fn sum(a: i32, b: i32) i32 {\n return a + b;\n}`,
language: 'zig',
},
{
label: 'C#',
filename: 'Sum.cs',
code: `public static int Sum(int a, int b) {\n return a + b;\n}`,
language: 'csharp',
},
{
label: 'Haskell',
filename: 'Sum.hs',
code: `sum :: Int -> Int -> Int\nsum a b = a + b`,
language: 'haskell',
},
]}
/>
);
}<!-- apps/docs/src/components/examples/code-block/language-tabs/svelte.svelte -->
<script lang="ts">
import { LanguageTabsCodeBlock } from '@cloudvoyant/helical-svelte';
const tabs = [
{
label: 'TypeScript',
filename: 'sum.ts',
code: `export function sum(a: number, b: number): number {\n return a + b;\n}`,
language: 'ts',
},
{
label: 'Python',
filename: 'sum.py',
code: `def sum(a: int, b: int) -> int:\n return a + b`,
language: 'python',
},
{
label: 'Go',
filename: 'sum.go',
code: `package main\n\nfunc sum(a, b int) int {\n\treturn a + b\n}`,
language: 'go',
},
{
label: 'C++',
filename: 'sum.cpp',
code: `int sum(int a, int b) {\n return a + b;\n}`,
language: 'cpp',
},
{
label: 'Rust',
filename: 'sum.rs',
code: `fn sum(a: i32, b: i32) -> i32 {\n a + b\n}`,
language: 'rust',
},
{
label: 'Zig',
filename: 'sum.zig',
code: `fn sum(a: i32, b: i32) i32 {\n return a + b;\n}`,
language: 'zig',
},
{
label: 'C#',
filename: 'Sum.cs',
code: `public static int Sum(int a, int b) {\n return a + b;\n}`,
language: 'csharp',
},
{
label: 'Haskell',
filename: 'Sum.hs',
code: `sum :: Int -> Int -> Int\nsum a b = a + b`,
language: 'haskell',
},
];
</script>
<LanguageTabsCodeBlock showLineNumbers {tabs} />Multi File
// apps/docs/src/components/examples/code-block/multi-file/react.tsx
import { MultiFileCodeBlock } from '@cloudvoyant/helical-react';
export default function ReactCodeBlockMultiFile() {
return (
<MultiFileCodeBlock
files={[
{ filename: 'index.ts', code: `export { sum } from './sum';`, language: 'ts' },
{ filename: 'sum.ts', code: `export function sum(a: number, b: number) {\n return a + b;\n}`, language: 'ts' },
]}
/>
);
}<!-- apps/docs/src/components/examples/code-block/multi-file/svelte.svelte -->
<script lang="ts">
import { MultiFileCodeBlock } from '@cloudvoyant/helical-svelte';
</script>
<MultiFileCodeBlock
files={[
{ filename: 'index.ts', code: `export { sum } from './sum';`, language: 'ts' },
{ filename: 'sum.ts', code: `export function sum(a: number, b: number) {\n return a + b;\n}`, language: 'ts' },
]}
/>Prerendered
ts
const answer = 42;ts
const answer = 42;// apps/docs/src/components/examples/code-block/prerendered/react.tsx
import { CodeBlock } from '@cloudvoyant/helical-react';
const code = `const answer = 42;`;
const html = `<pre class="shiki" tabindex="-1"><code><span class="line line-highlighted"><span style="color:#0550ae">const</span><span style="color:#24292f"> answer </span><span style="color:#cf222e">=</span><span style="color:#24292f"> </span><span style="color:#0550ae">42</span><span style="color:#24292f">;</span></span></code></pre>`;
export default function ReactCodeBlockPrerendered() {
return <CodeBlock code={code} language="ts" html={html} showLineNumbers highlightLines={[1]} />;
}<!-- apps/docs/src/components/examples/code-block/prerendered/svelte.svelte -->
<script lang="ts">
import { CodeBlock } from '@cloudvoyant/helical-svelte';
const code = `const answer = 42;`;
const html = `<pre class="shiki" tabindex="-1"><code><span class="line line-highlighted"><span style="color:#0550ae">const</span><span style="color:#24292f"> answer </span><span style="color:#cf222e">=</span><span style="color:#24292f"> </span><span style="color:#0550ae">42</span><span style="color:#24292f">;</span></span></code></pre>`;
</script>
<CodeBlock {code} language="ts" {html} showLineNumbers highlightLines={[1]} />API Reference
CodeBlock — code, language (default tsx), filename, html, showLineNumbers, scrollable, maxHeight, highlightLines; renders a default header + content unless children is provided.
CodeBlockHeader / CodeBlockTitle / CodeBlockContent / CodeBlockCopyButton — composite parts; must be inside a CodeBlock. CodeBlockContent accepts an html override.
MultiFileCodeBlock — files ({ filename, code, language?, html? }[]), showLineNumbers, scrollable, maxHeight.
LanguageTabsCodeBlock — tabs ({ label, filename, code, language?, html? }[]), showLineNumbers, scrollable, maxHeight; renders a language dropdown (far right) and a floating copy button.