Code Block

Example

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));

<div class="omni-code-block">
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));</code></pre>
</div>

Inline Code

Use class="omni-code-inline" for inline code snippets within text:

<p>Install the package using <code class="omni-code-inline">npm install omniui</code> to get started.</p>

Code Block with Header

Use data-header="true" to add a header with filename and actions:

import { createButton } from 'omniui';

const button = createButton({
  variant: 'primary',
  size: 'lg'
});

document.body.appendChild(button);

<div class="omni-code-block" data-header="true">
  <div class="omni-code-header">
    <span class="omni-code-filename">example.js</span>
    <div class="omni-code-actions">
      <button class="omni-button" data-size="sm" aria-label="Copy code">
        <svg>...</svg>
      </button>
    </div>
  </div>
  <pre><code>...</code></pre>
</div>

Text Wrapping

Use data-wrap="true" to wrap long lines instead of scrolling:

const veryLongVariableName = "This is a very long string that would normally overflow and require horizontal scrolling";

<div class="omni-code-block" data-wrap="true">
  <pre><code>...long code...</code></pre>
</div>

Scrollable Content

Use data-overflow="scroll" to set a maximum height of 400px with vertical scrolling:

function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Generate first 20 Fibonacci numbers
for (let i = 0; i < 20; i++) {
  console.log(`Fibonacci(${i}) = ${fibonacci(i)}`);
}

// More code to demonstrate scrolling
function isPrime(num) {
  if (num <= 1) return false;
  if (num <= 3) return true;
  if (num % 2 === 0 || num % 3 === 0) return false;

  for (let i = 5; i * i <= num; i += 6) {
    if (num % i === 0 || num % (i + 2) === 0) {
      return false;
    }
  }

  return true;
}

// Find first 10 prime numbers
const primes = [];
let num = 2;
while (primes.length < 10) {
  if (isPrime(num)) {
    primes.push(num);
  }
  num++;
}

console.log('First 10 primes:', primes);

<div class="omni-code-block" data-overflow="scroll">
  <pre><code>...long code...</code></pre>
</div>

Sizes

Control font size using the data-size attribute:

Small

const sum = (a, b) => a + b;

Medium (default)

const sum = (a, b) => a + b;

Large

const sum = (a, b) => a + b;

<div class="omni-code-block" data-size="sm">...</div>
<div class="omni-code-block">...</div>
<div class="omni-code-block" data-size="lg">...</div>

Semantic Variants

Use data-variant to convey meaning through color (works with both code blocks and inline code):

Primary

npm install omniui

Success

✓ Build completed successfully
✓ All tests passed

Warning

⚠ Deprecated: This API will be removed in v2.0
⚠ Consider using the new API instead

Danger

✗ Error: Module not found
✗ Build failed with 3 errors

Info

ℹ Starting development server...
ℹ Server running at http://localhost:3000

Inline Variants

<div class="omni-code-block" data-variant="primary">...</div>
<code class="omni-code-inline" data-variant="success">...</code>

Combined Features

Combine multiple features for enhanced code blocks:

{
  "name": "my-app",
  "version": "1.0.0",
  "type": "module"
}

<div class="omni-code-block"
     data-header="true"
     data-variant="primary"
     data-size="lg">
  <div class="omni-code-header">
    <span class="omni-code-filename">config.json</span>
    <div class="omni-code-actions">
      <button class="omni-button" aria-label="Copy code">...</button>
    </div>
  </div>
  <pre><code>...</code></pre>
</div>

API Reference

Code Block

Inline Code

CSS Classes

Accessibility

• Uses semantic <pre> and <code> elements for proper structure
• Monospace font ensures readable code formatting for all users
• High contrast mode automatically increases border thickness for better visibility
• Responsive design removes borders on mobile for edge-to-edge display
• Copy buttons in headers should include aria-label for screen readers
• Text wrapping option improves readability on narrow viewports
• Semantic variants convey meaning through color with sufficient contrast ratios
• Tab size set to 2 spaces for consistent indentation across browsers

Best Practices

• Use <pre><code> structure to preserve whitespace and formatting
• HTML-encode code examples to prevent rendering (use < for <, etc.)
• Add filename context in headers for multi-file examples
• Use semantic variants to indicate different output types (success, errors, warnings)
• Enable text wrapping for mobile-friendly code display
• Consider data-overflow="scroll" for very long code blocks
• Inline code is best for short snippets within text, not multi-line blocks
• Pair syntax highlighting libraries (like Prism.js or Highlight.js) with OmniUI styles

Components Used

Other OmniUI components demonstrated on this page:

Related