Automatic Syntax Parser

The design system includes a lightweight, automatic syntax parser that tokenizes TypeScript/JavaScript/JSX code for multi-color syntax highlighting. Just pass plain code strings - no manual tokenization required!

Automatic

Pass plain strings - parsing happens automatically with zero configuration

Lightweight

~2KB regex-based implementation with O(n) performance

14 Token Types

Comprehensive support for TS/JS/JSX syntax elements

Syntax Highlighting Colors

Theme-aware syntax highlighting colors based on VS Code Dark+ theme. These tokens automatically switch between light and dark modes to ensure optimal contrast and readability (WCAG AA 4.5:1).

Note: The syntax parser automatically applies these colors when you use CollapsibleCodeBlock. For manual styling, use CSS custom properties like var(--syntax-keyword).

Live Example

See the syntax colors in action. Toggle between light and dark mode to see how colors adapt.

// Example TypeScript code
import { useState } from 'react';

interface Props {
  count: number;
  isActive: boolean;
}

function Example({ count, isActive }: Props) {
  const [state, setState] = useState(0);
  return isActive ? count : 0;
}

Token Reference

--syntax-comment

Comments

// This is a comment
--syntax-keyword

Keywords (const, function, etc.)

const function import
--syntax-function

Function names

myFunction()
--syntax-string

String literals

"Hello World"
--syntax-number

Numeric values

42 3.14
--syntax-boolean

Boolean values

true false
--syntax-operator

Operators (=, +, -, etc.)

= + - * /
--syntax-property

Object properties

backgroundColor
--syntax-className

Class/type names

MyComponent
--syntax-tag

HTML/JSX tags

<div>
--syntax-attribute

HTML/JSX attributes

className id
--syntax-variable

Variable names

myVariable
--syntax-punctuation

Punctuation ({}, [], ())

{ } [ ] ( )
--syntax-plain

Default text color

regular text

Usage Examples

Auto-Parsing (Recommended)

Simply pass a plain code string - the parser automatically tokenizes it!

import { CollapsibleCodeBlock, parseCode } from '@opencosmos/ui';

// Automatic tokenization - just pass the code string!
<CollapsibleCodeBlock
  id="my-code"
  code='const greeting = "Hello World";'
/>

// Or use parseCode utility directly
const tokens = parseCode(`
  import { useState } from 'react';

  function Counter() {
    const [count, setCount] = useState(0);
    return <button onClick={() => setCount(count + 1)}>{count}</button>;
  }
`);

Manual Tokenization (Advanced)

For fine-grained control, you can manually specify token types.

// Manual tokenization for custom control
<CollapsibleCodeBlock
  id="my-code"
  code={[
    { text: 'const', type: 'keyword' },
    { text: ' example ', type: 'plain' },
    { text: '=', type: 'operator' },
    { text: ' "value"', type: 'string' },
  ]}
/>

CSS Variables (Low-Level)

Use CSS custom properties for manual styling.

// CSS approach with manual spans
<span className="text-[var(--syntax-keyword)]">const</span>
<span className="text-[var(--syntax-plain)]"> example </span>
<span className="text-[var(--syntax-operator)]">=</span>
<span className="text-[var(--syntax-string)]"> "value"</span>