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 |
| 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

$3

``bash
npm install @profpowell/code-block
`

$3

Add this repository as a git submodule to your project:

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

Then import the component:

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

Usage

Once imported, the custom element is automatically registered:

`html

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

`

$3

`html

import pandas as pd

df = pd.read_csv('data.csv')
print(df.head())

`

$3

`html

.container {
display: grid;
gap: 1rem;
}

`

$3

`html

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);
}
}

`

$3

`html

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

class UserService {
async getUser(id: number): Promise {
const response = await fetch(/api/users/${id});
return response.json();
}
}

`

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

$3

| 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 |

$3

| Method | Returns | Description |
|--------|---------|-------------|
| copyCode() | Promise | 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 |

$3

`javascript
// 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.