<code-block>

A lightweight Web Component for displaying code with syntax highlighting, copy functionality, line numbers, and theme support.

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

Features

13+ languages supported via highlight.js including JavaScript, Python, CSS, HTML, JSON, YAML, and more.

Group related files in a tabbed interface with <code-block-group>.

Draw attention to specific lines with the highlight-lines attribute.

Load code from URLs with the src attribute. Auto-detects language from file extension.

Dim non-highlighted lines to draw attention to specific code sections.

GitHub-inspired color schemes with full CSS custom property support.

Install via npm:

npm install @profpowell/code-block

Or include via CDN:

<code-block language="javascript"> const greeting = "Hello, World!"; console.log(greeting); </code-block>