--- /** * CodeBlock — an editor-style code card: a dark, rounded shell (dark in * both light and dark pages, like a real code editor) with either a * filename header or a small tab bar, build-time Shiki syntax * highlighting close to the original's `atom-dark` theme, a line-number * gutter, per-line highlight markers, and a copy-to-clipboard button. * * Highlighting happens entirely at build time via Astro's built-in * `astro:components` `Code` component (Shiki) — zero client JS for the * syntax colors themselves. A Shiki transformer tags the requested * `highlightLines` with a class the stylesheet turns into a highlight * band, mirroring the original's `lineProps` callback. * * All tab panels are rendered server-side and stacked; a custom element * toggles which one is visible and reads the active panel's raw code * (via a `data-code` attribute, so whitespace/newlines survive exactly) * to drive `navigator.clipboard.writeText`. * * Deviation from the original: the original only rendered the copy * button in the single-file (no `tabs`) layout. Here the copy button is * always shown next to the tab bar or the filename, since copying the * active tab's code is expected behavior. */ import { Code } from 'astro:components'; import type { BundledLanguage, ShikiTransformer, SpecialLanguage } from 'shiki'; /** Any Shiki bundled language id (e.g. `"jsx"`, `"css"`, `"markdown"`). */ type CodeBlockLanguage = BundledLanguage | SpecialLanguage; interface CodeBlockTab { /** Label shown on this tab's button. */ name: string; /** Source code for this tab. */ code: string; /** Shiki language id for this tab; falls back to the root `language` prop. */ language?: CodeBlockLanguage; /** 1-indexed line numbers to highlight for this tab. */ highlightLines?: number[]; } interface Props { /** Shiki language id used to highlight `code` (or any tab without its own `language`). */ language: CodeBlockLanguage; /** Filename shown in the header when not using `tabs`. */ filename?: string; /** Source code to highlight when not using `tabs`. */ code?: string; /** Tabs to render instead of a single filename + code panel. */ tabs?: CodeBlockTab[]; /** 1-indexed line numbers to highlight when not using `tabs`. */ highlightLines?: number[]; /** Additional classes for the root element. */ class?: string; } const { language, filename, code, tabs = [], highlightLines = [], class: className, } = Astro.props; const hasTabs = tabs.length > 0; const panels = hasTabs ? tabs.map((tab) => ({ name: tab.name, code: tab.code, language: tab.language ?? language, highlightLines: tab.highlightLines ?? [], })) : [ { name: filename ?? '', code: code ?? '', language, highlightLines, }, ]; /** * Tags each requested line with a highlight class. The line-number gutter * itself is done in CSS with a counter (`nui-line`) rather than a hast * property, since `hast`'s `Properties` type has no index signature for * arbitrary `data-*` keys. */ function highlightLinesTransformer(lines: number[]): ShikiTransformer { return { name: 'nular-code-block-highlight-lines', line(node, line) { if (lines.includes(line)) { this.addClassToHast(node, 'nui-line--highlight'); } }, }; } const uid = `nui-code-block-${Math.random().toString(36).slice(2, 9)}`; ---

{ hasTabs ? (

{panels.map((panel, index) => ( ))}

) : (

{filename}

) }

{ panels.map((panel, index) => (


      ))
    }

Installation

Install dependencies

Add these files

Configuration

Use it