docs / content

<tc-code>

Styled code block with optional copy button. Doesn't ship a highlighter — bring your own pre-tokenized HTML.

import "@ra9/tan-compose-kit/code"

Props

Name	Type	Default	Description
`language`	`string`	`""`	Shown as a small label in the corner. Also added as a `lang-*` class on the inner `<code>`.
`copy`	`boolean`	`false`	Render a copy-to-clipboard button in the corner.
`filename`	`string`	`""`	When set, shown in the corner instead of `language`. Useful for "this is config.yml" framing.

Events

Event	Detail	When
`tc-copy`	`{ text: string }`	Fires after a successful copy. Useful for analytics or "copied!" toasts.

Slots

Slot	Description
`(default)`	Code content. Either plain text or pre-tokenized HTML using the `tc-kw` / `tc-str` / `tc-com` / `tc-num` / `tc-tag` classes.

CSS variables

Variable	Default	Description
`--tc-code-bg`	`var(--tc-code-bg-base, #14171f)`	Block background.
`--tc-code-ink`	`var(--tc-code-ink-base, #efe6d4)`	Default text color.
`--tc-code-rule`	`var(--tc-code-rule-base, rgba(255,255,255,0.08))`	Header divider color.
`--tc-code-label`	`var(--tc-code-label-base, #8a8678)`	Color of the language/filename label.
`--tc-code-radius`	`var(--tc-radius-md, 10px)`	Corner radius.
`--tc-code-font`	`var(--tc-font-mono, …)`	Monospace font family.
`--tc-code-padding`	`var(--tc-space-5, 20px) var(--tc-space-5, 20px)`	Padding inside the `<pre>`.
`--tc-code-kw`	`var(--tc-code-kw-base, #f0a878)`	Color for `.tc-kw` (keywords).
`--tc-code-str`	`var(--tc-code-str-base, #d9b380)`	Color for `.tc-str` (strings).
`--tc-code-com`	`var(--tc-code-com-base, #8a8678)`	Color for `.tc-com` (comments).
`--tc-code-num`	`var(--tc-code-num-base, #c4d3b8)`	Color for `.tc-num` (numbers).
`--tc-code-tag`	`var(--tc-code-tag-base, #d49a68)`	Color for `.tc-tag` (HTML/JSX tags).

Examples

Basic usage

deno task blog

<tc-code language="bash">deno task blog</tc-code>

With a copy button

import { build } from "@ra9/tan-compose";

<tc-code language="ts" copy> import { build } from "@ra9/tan-compose"; </tc-code>

Showing a filename

filename replaces language in the corner label. Handy when the code is meant to be saved under a specific name.

<tc-code filename="deno.json" copy>{ "tasks": { "blog": "deno run -A scripts/build-blog.ts" } }</tc-code>

Syntax highlighting

The component doesn't ship a highlighter — wrap tokens in pre-defined classes and they pick up the kit's color tokens. The classes are scoped via ::slotted so they only style code inside tc-code.

Class	Used for
`tc-kw`	keywords
`tc-str`	strings
`tc-com`	comments
`tc-num`	numbers
`tc-tag`	HTML/JSX tag names

<tc-code language="ts" copy> <span class="tc-kw">const</span> name = <span class="tc-str">"Carlos"</span>; <span class="tc-com">// a comment</span> </tc-code>

Listening for copies

<tc-code id="snippet" language="bash" copy>deno task blog</tc-code> <script type="module"> document.getElementById("snippet").addEventListener("tc-copy", (e) => { console.log("copied:", e.detail.text); }); </script>

Theming

The default skin is dark even in light themes — code blocks intentionally break out of the surrounding surface. Override the base tokens to opt out.

<tc-code style="--tc-code-bg: #f6f8fa; --tc-code-ink: #24292f; --tc-code-kw: #cf222e;" language="ts" >const x = 1;</tc-code>

Accessibility

The block uses a real <pre><code> so screen readers treat it as code.
The copy button has aria-label="Copy code" and shows a check icon + "Copied" text after a successful copy.
The language/filename label is plain text — assistive tech reads it before the code itself.
Clipboard writes use the async clipboard API and fall back gracefully if it's unavailable.

← All components