Code optional

Display code snippets with syntax highlighting, line numbers, and copy-to-clipboard functionality.

Zero Dependencies

The Code component works great with CSS-only styling. JavaScript adds copy-to-clipboard functionality. Syntax highlighting is optional - include Prism.js if you want colored syntax.

Basic Code Block

A simple code container with dark background and monospace font.

const greeting = 'Hello, World!';
console.log(greeting);

HTML

<div class="focus-code">
  <pre><code>const greeting = 'Hello, World!';
console.log(greeting);</code></pre>
</div>

With Header

Add a header with a language label and copy button.

JavaScript

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

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

HTML

<div class="focus-code">
  <div class="focus-code-header">
    <span class="focus-code-title focus-code-title-js">JavaScript</span>
    <button class="focus-code-copy" data-focus-code-copy>
      <i class="fa fa-copy"></i> Copy
    </button>
  </div>
  <pre><code>function greet(name) {
  return `Hello, ${name}!`;
}</code></pre>
</div>

Language Colors

Language labels have different colors for common programming languages.

HTML

<div>Hello</div>

CSS

.class { color: red; }

Python

print("Hello")

Bash

echo "Hello"

HTML

<!-- Available language colors -->
<span class="focus-code-title focus-code-title-html">HTML</span>
<span class="focus-code-title focus-code-title-css">CSS</span>
<span class="focus-code-title focus-code-title-js">JavaScript</span>
<span class="focus-code-title focus-code-title-ts">TypeScript</span>
<span class="focus-code-title focus-code-title-python">Python</span>
<span class="focus-code-title focus-code-title-bash">Bash</span>
<span class="focus-code-title focus-code-title-json">JSON</span>
<span class="focus-code-title focus-code-title-php">PHP</span>
<span class="focus-code-title focus-code-title-ruby">Ruby</span>
<span class="focus-code-title focus-code-title-go">Go</span>
<span class="focus-code-title focus-code-title-rust">Rust</span>
<span class="focus-code-title focus-code-title-java">Java</span>
<span class="focus-code-title focus-code-title-sql">SQL</span>

Line Numbers

Add line numbers in a separate div so they can't be selected when copying code.

JavaScript

123456
function fibonacci(n) {  if (n <= 1) return n;  return fibonacci(n - 1) + fibonacci(n - 2);}console.log(fibonacci(10));

HTML

<div class="focus-code focus-code-lines">
  <div class="focus-code-header">
    <span class="focus-code-title focus-code-title-js">JavaScript</span>
    <button class="focus-code-copy" data-focus-code-copy>Copy</button>
  </div>
  <pre><div class="focus-code-line-numbers"><span>1</span><span>2</span><span>3</span><span>4</span></div><code><span class="line">function fibonacci(n) {</span><span class="line">  if (n <= 1) return n;</span><span class="line">  return fibonacci(n - 1) + fibonacci(n - 2);</span><span class="line">}</span></code></pre>
</div>

Light Variant

Use .focus-code-light for a light background variant.

Terminal

npm install focus-ui

HTML

<div class="focus-code focus-code-light">
  <div class="focus-code-header">
    <span class="focus-code-title">Terminal</span>
    <button class="focus-code-copy" data-focus-code-copy>Copy</button>
  </div>
  <pre><code>npm install focus-ui</code></pre>
</div>

Syntax Highlighting (Optional)

External Dependency

Syntax highlighting requires Prism.js. Include it separately - Focus UI remains zero-dependency.

HTML

<!-- Include Prism.js CSS theme -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">

<!-- Include Prism.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>

<!-- Add language-* class to code element -->
<div class="focus-code">
  <pre><code class="language-javascript">const x = 1;</code></pre>
</div>

<script>
  // Prism will auto-highlight, or call manually:
  Prism.highlightAll();
</script>

JavaScript API

Copy buttons are auto-initialized via data-focus-code-copy. Use the API for programmatic control.

Copy Code

JavaScript

await Code.copy('#myCodeBlock')
Code.init()

Methods

Method	Returns	Description
`Code.copy(selector)`	Promise	Copy code content to clipboard
`Code.init()`	void	Initialize copy buttons (auto-called on page load)

CSS Classes Reference

Class	Description
`.focus-code`	Base code block container (dark background)
`.focus-code-light`	Light background variant
`.focus-code-header`	Header bar for title and copy button
`.focus-code-title`	Language label in header
`.focus-code-title-{lang}`	Language-specific color (js, html, css, python, etc.)
`.focus-code-copy`	Copy button styling
`.focus-code-lines`	Enable line numbers layout (flexbox)
`.focus-code-line-numbers`	Container for line numbers (non-selectable)
`.line`	Wrap each code line for proper spacing

Data Attributes

Attribute	Description
`data-focus-code-copy`	Add to copy button for auto-initialization