CodeBlock

Lockness UI Component

LLM DOCS:VIEW

DOCUMENTATION

CodeBlock

A collection of components for displaying code with syntax highlighting and copy-to-clipboard functionality. Supports multiple themes and various display formats.

Installation

bash

deno run -A jsr:@lockness/ui add codeblock

Components

The CodeBlock package exports four components:

InlineCode - For inline code snippets within text
Command - For displaying terminal commands with copy button
CommandBlock - Full code block styled for terminal commands
CodeBlock - Full code block with syntax highlighting

Usage

tsx

import {
    CodeBlock,
    Command,
    CommandBlock,
    InlineCode,
} from '@lockness/ui/components'

InlineCode

For inline code within paragraphs.

tsx

<p>
    Use the <InlineCode>deno run</InlineCode> command to execute scripts.
</p>

Props

Prop	Type	Default	Description
`children`	`string`	-	The code text to display
`id`	`string`	auto-generated	Optional HTML id attribute

CSS Variables

InlineCode can be styled using CSS variables:

css

:root {
    --inline-code-background: oklch(0.26 0.01 260);
    --inline-code-foreground: oklch(0.85 0.1 140);
    --inline-code-font-size: 0.875rem;
    --inline-code-padding-x: 0.375rem;
    --inline-code-padding-y: 0.125rem;
    --inline-code-border-radius: 0.25rem;
}

Command

Displays a command with a copy button, ideal for one-liner terminal commands.

tsx

<Command>deno run -A main.ts</Command>

Props

Prop	Type	Default	Description
`children`	`string`	-	The command text to display
`id`	`string`	auto-generated	Optional HTML id attribute

CommandBlock

A full code block styled for terminal commands with header and copy button.

tsx

<CommandBlock lang='bash'>
    npm install @lockness/ui
</CommandBlock>

Props

Prop	Type	Default	Description
`children`	`string`	-	The code content to display
`lang`	`Language`	`bash`	Programming language for syntax highlighting
`theme`	`ThemeName`	`default`	Syntax highlighting theme

CodeBlock

Full code block with syntax highlighting, language label, and copy button.

tsx

<CodeBlock lang='typescript'>
    {`const greeting = "Hello, World!";
console.log(greeting);`}
</CodeBlock>

Props

Prop	Type	Default	Description
`children`	`string`	-	The code content to display
`lang`	`Language`	`typescript`	Programming language for syntax highlighting
`theme`	`ThemeName`	`default`	Syntax highlighting theme

Themes

Five built-in themes are available:

Theme	Description
`default`	Neutral dark theme with balanced colors
`monokai`	Classic warm theme inspired by Monokai
`github`	Clean minimal theme inspired by GitHub
`nord`	Arctic, north-bluish color palette
`plain`	No syntax highlighting, monospace text only

Default Theme

tsx

<CodeBlock lang='typescript' theme='default'>
    {`function greet(name: string): string {
  return \`Hello, \${name}!\`;
}`}
</CodeBlock>

Monokai Theme

tsx

<CodeBlock lang='typescript' theme='monokai'>
    {`function greet(name: string): string {
  return \`Hello, \${name}!\`;
}`}
</CodeBlock>

GitHub Theme

tsx

<CodeBlock lang='typescript' theme='github'>
    {`function greet(name: string): string {
  return \`Hello, \${name}!\`;
}`}
</CodeBlock>

Nord Theme

tsx

<CodeBlock lang='typescript' theme='nord'>
    {`function greet(name: string): string {
  return \`Hello, \${name}!\`;
}`}
</CodeBlock>

Plain Theme

tsx

<CodeBlock lang='typescript' theme='plain'>
    {`function greet(name: string): string {
  return \`Hello, \${name}!\`;
}`}
</CodeBlock>

Language Support

The lang prop is typesafe using the Language type. Import it for type hints:

tsx

import { CodeBlock, type Language } from '@lockness/ui/components'

Supported Languages

Category	Languages
JavaScript	`typescript`, `javascript`, `tsx`, `jsx`
Systems	`rust`, `go`, `c`, `cpp`
Backend	`python`, `java`, `kotlin`, `swift`, `csharp`, `php`, `ruby`
Shell	`bash`, `shell`, `zsh`, `powershell`
Data	`sql`, `json`, `yaml`, `toml`, `xml`, `graphql`
Web	`html`, `css`, `scss`, `less`
Config	`dockerfile`, `nginx`, `apache`, `markdown`
Other	`plaintext`, `text`

Custom languages are also supported (string fallback for highlight.js compatibility).

Examples

Displaying TypeScript Code

tsx

<CodeBlock lang='typescript' theme='monokai'>
    {`interface User {
  id: number;
  name: string;
  email: string;
}

const users: User[] = await fetchUsers();
console.log(users);`}
</CodeBlock>

Terminal Commands

tsx

<CommandBlock lang='bash' theme='nord'>
    {`# Clone the repository
git clone https://github.com/lockness/app.git

# Install dependencies
deno install

# Start the development server
deno task dev`}
</CommandBlock>

Inline Code in Text

tsx

<p>
    Run <InlineCode>deno task build</InlineCode>{' '}
    to create a production build. The output will be in the{' '}
    <InlineCode>dist/</InlineCode> directory.
</p>

Mixed Usage

tsx

<div>
    <p>First, install the package:</p>
    <Command>deno add @lockness/ui</Command>

    <p>Then import and use the components:</p>
    <CodeBlock lang='tsx'>
        {`import { Button } from '@lockness/ui/components'

export function App() {
  return <Button>Click me</Button>
}`}
    </CodeBlock>
</div>

INLINE CODE

Use the deno run command to execute scripts. The --allow-net flag enables network access.

tsx

<p>
  Use the <InlineCode>deno run</InlineCode> command to execute scripts.
</p>

COMMAND

deno run -A main.ts

tsx

<Command>deno run -A main.ts</Command>

COMMAND BLOCK

bash

# Clone the repository
git clone https://github.com/lockness/app.git

# Install dependencies
deno install

# Start the development server
deno task dev

tsx

<CommandBlock lang="bash">
{`# Clone the repository
git clone https://github.com/lockness/app.git

# Install dependencies
deno install`}
</CommandBlock>

CODE BLOCK

typescript

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUsers(): Promise<User[]> {
  const response = await fetch('/api/users');
  return response.json();
}

tsx

<CodeBlock lang="typescript">
{`interface User {
  id: number;
  name: string;
}`}
</CodeBlock>

DEFAULT THEME

typescript

function greet(name: string): string {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

MONOKAI THEME

typescript

function greet(name: string): string {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

GITHUB THEME

typescript

function greet(name: string): string {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

NORD THEME

typescript

function greet(name: string): string {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

PLAIN THEME (NO HIGHLIGHTING)

typescript

function greet(name: string): string {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

Edit this page