code-block

A feature-rich code block web component with syntax highlighting, copy-to-clipboard, and extensive customization options. Designed for tutorials, documentation, and educational content.

Highlights

See the live demo for all features in action

| Feature | Description | |---------|-------------| | Multi-File Tabs | Tabbed interface for related code files with <code-block-group> | | Line Highlighting | Draw attention to specific lines with highlight-lines="3,5-7" | | Focus Mode | Dim non-highlighted lines with focus-mode for emphasis | | Share & Download | One-click download or open in CodePen | | Collapsible Blocks | Expandable code with "Show more" for long snippets | | Lazy Loading | Defer syntax highlighting until visible for performance | | Diff Support | Visualize code changes with +/- line highlighting | | Custom Themes | Full CSS custom property support for branding | | Light & Dark | GitHub-inspired color schemes |

Features

• 13 Web Languages - HTML, CSS, JS, JSON, YAML, PHP, and more
• Line Numbers - Optional line number display
• Filename Headers - Show file paths in the header
• Copy to Clipboard - One-click copy with visual feedback
• Word Wrap - Toggle between scroll and wrap for long lines
• Shadow DOM - Encapsulated styles that won't conflict with your app
• Accessible - ARIA labels, keyboard focus, screen reader support
• TypeScript Support - Full type definitions included

Installation

npm

npm install @profpowell/code-block

Git Submodule

Add this repository as a git submodule to your project:

git submodule add https://github.com/ProfPowell/code-block.git lib/code-block
cd lib/code-block && npm install

Then import the component:

import './lib/code-block/code-block.js';

Usage

Once imported, the <code-block> custom element is automatically registered:

<code-block language="javascript">
function greet(name) {
  return `Hello, ${name}!`;
}
</code-block>

With Custom Label

<code-block language="python" label="Data Processing">
import pandas as pd

df = pd.read_csv('data.csv')
print(df.head())
</code-block>

Dark Theme

<code-block language="css" theme="dark">
.container {
  display: grid;
  gap: 1rem;
}
</code-block>

With Line Numbers

<code-block language="javascript" show-lines>
class EventEmitter {
  constructor() {
    this.events = new Map();
  }

  on(event, callback) {
    if (!this.events.has(event)) {
      this.events.set(event, []);
    }
    this.events.get(event).push(callback);
  }
}
</code-block>

Combined Options

<code-block language="typescript" theme="dark" show-lines label="User Service">
interface User {
  id: number;
  name: string;
}

class UserService {
  async getUser(id: number): Promise<User> {
    const response = await fetch(`/api/users/${id}`);
    return response.json();
  }
}
</code-block>

Supported Languages

The component includes an optimized bundle with 13 web development languages:

| Language | Values | |----------|--------| | HTML | html, markup | | XML | xml | | XHTML | xhtml | | SVG | svg | | CSS | css | | JavaScript | javascript, js | | JSON | json | | YAML | yaml, yml | | PHP | php | | HTTP | http | | Diff | diff | | Plain Text | plaintext, text, txt | | CSV | csv |

Additional languages can be added by importing them from highlight.js.

API

Attributes

| Attribute | Type | Default | Description | |-----------|------|---------|-------------| | language | string | 'plaintext' | Programming language for highlighting | | label | string | language | Label displayed in the header | | theme | 'light' | 'dark' | 'light' | Color theme | | show-lines | boolean | false | Display line numbers | | filename | string | — | File path shown in header | | highlight-lines | string | — | Lines to highlight (e.g., "3,5-7") | | focus-mode | boolean | false | Dim non-highlighted lines for emphasis | | collapsed | boolean | false | Start in collapsed state | | max-lines | number | 10 | Lines visible when collapsed | | max-height | string | — | Max height with scrolling (e.g., "300px") | | wrap | boolean | false | Wrap long lines | | copy-text | string | 'Copy' | Custom copy button text | | copied-text | string | 'Copied!' | Custom success message | | show-share | boolean | false | Show share button | | show-download | boolean | false | Show download button | | lazy | boolean | false | Defer highlighting until visible |

Methods

| Method | Returns | Description | |--------|---------|-------------| | copyCode() | Promise<void> | Copy code to clipboard | | setCode(code) | void | Update code content | | getCode() | string | Get current code | | downloadCode() | void | Download as file | | openInCodePen() | void | Open in CodePen | | toggleCollapsed() | void | Toggle collapsed state | | render() | void | Re-render the component |

Programmatic Usage

// Get a reference to a code block
const codeBlock = document.querySelector('code-block');

// Copy code programmatically
await codeBlock.copyCode();

// Update code content dynamically
codeBlock.setCode('const updated = true;');

// Get current code
const code = codeBlock.getCode();

// Get all supported languages (static method)
const languages = CodeBlock.getSupportedLanguages();
console.log(`Supports ${languages.length} languages`);

Demo

Open demo.html in a browser to see all features in action:

• Multi-file tabbed interface
• Line highlighting
• Focus mode
• Share & download buttons
• Collapsible code blocks
• Lazy loading for performance
• Diff visualization
• CSS custom properties
• Light and dark themes
• Complete API reference

Browser Support

Works in all modern browsers that support:

• Custom Elements v1
• Shadow DOM v1
• ES6 Modules
• Clipboard API

Dependencies

• highlight.js ^11.11.1 - Syntax highlighting

License

MIT License - see LICENSE for details.