Skip to content
TekiVex UI

TkxCode

A syntax-highlighted code block for docs and dev-tool UIs — with zero dependencies. Where TkxMarkdown renders code plainly, TkxCode tokenizes it with a small built-in regex highlighter and colours tokens from your active theme (keywords → primary, strings → success, comments → textMuted, numbers → warning, …). No hardcoded hex, so it follows every theme automatically.

Highlighting output is React <span> text nodes — never dangerouslySetInnerHTML — so untrusted snippets can’t inject markup.

import { TkxCode } from 'tekivex-ui';


<TkxCode
  language="ts"
  filename="hello.ts"
  code={`const greet = (name: string) => {
  // template literals work too
  return \`Hello, \${name}!\`;
};`}
/>

Line numbers & line highlighting

Section titled “Line numbers & line highlighting”

showLineNumbers adds an aria-hidden gutter. highlightLines (1-based) tints the given rows with a subtle primary-coloured background and edge marker — great for “look at this line” moments in docs.

<TkxCode
  language="tsx"
  showLineNumbers
  highlightLines={[2, 3]}
  code={snippet}
/>

Copy button & filename header

Section titled “Copy button & filename header”

The copy button is on by default (copyable) and writes the original code string via navigator.clipboard (guarded — it’s a no-op where the API is unavailable). Pass filename to render a header bar; the copy button moves into it.

<TkxCode language="bash" filename="deploy.sh" code={script} />
<TkxCode language="json" copyable={false} code={payload} />

Long code

Section titled “Long code”

By default long lines scroll horizontally; set wrap to soft-wrap instead. maxHeight caps the block and scrolls vertically.

<TkxCode language="json" maxHeight={320} wrap code={bigBlob} />

Supported languages

Section titled “Supported languages”
ValueHighlights
ts / jskeywords, strings (incl. template literals), comments, numbers, booleans/null/undefined, function calls
tsx / jsxeverything above, plus JSX tag names and attribute names
jsonobject keys, string/number values, true/false/null
bashcomments, strings, $variables, --flags, builtins/keywords
cssselectors, at-rules, property names, numbers/units, hex colours, comments
htmlcomments, tag names, attribute names, attribute-value strings
pythonkeywords, strings (incl. '''/""" and f/r prefixes), decorators, comments, numbers, True/False/None
textnone — plain rendering (the default)

Props

Section titled “Props”
PropTypeDefaultDescription
codestring''The source to display. A bare mount never crashes.
languageTkxCodeLanguage'text'One of the languages above; 'text' disables highlighting.
showLineNumbersbooleanfalseRender an aria-hidden line-number gutter.
highlightLinesnumber[]—1-based lines to emphasise with a primary-tinted row.
copyablebooleantrueShow the copy button (aria-label="Copy code").
filenamestring—Header bar with the filename; also feeds the code’s aria-label.
wrapbooleanfalseSoft-wrap long lines instead of horizontal scrolling.
maxHeightnumber | string—Cap the code area’s height (number = px).
className / style——Applied to the root container.

The component forwards its ref to the root <div>. The code renders inside semantic <pre><code> with an aria-label derived from filename or language.

Limitations

Section titled “Limitations”