Skip to main content
Code Syntactic Sugar exports several TypeScript types that define the structure of tokens, lines, and configuration options.

​
Token

Represents a code token as a tuple of token type index and token value. 
type Token = [number, string];
Structure:
  • [0] (number): Index of the token type (see TokenType)
  • [1] (string): The actual text content of the token
Example: 
const token: Token = [1, "const"]; // keyword token
const token2: Token = [0, "myVariable"]; // identifier token

​
TokenType

Union type of all possible token type strings. 
type TokenType = (typeof types)[number];
Possible Values:
  • "identifier" - Variable names, function names
  • "keyword" - JavaScript keywords (if, const, function, etc.)
  • "string" - String literals
  • "class" - Class names, numbers, null
  • "property" - Object properties
  • "entity" - Special entities
  • "jsxliterals" - JSX literal values
  • "sign" - Operators and punctuation
  • "comment" - Comments
  • "break" - Line breaks
  • "space" - Whitespace

​
Child

Represents a single token element in the rendered output. 
type Child = {
  type: "element";
  tagName: "span";
  children: Readonly<
    [
      {
        type: "text";
        value: string;
      },
    ]
  >;
  properties: Readonly<{
    className: `css__token--${TokenType}`;
    style: CSSProperties;
  }>;
};

​
Children

Array of child token elements. 
type Children = Readonly<Child[]>;
A read-only array of Child elements representing all tokens in a line.

​
Line

Represents a complete line of code with all its tokens. 
type Line = {
  type: "element";
  tagName: "span";
  children: Children;
  properties: {
    className: "css__line";
  };
};
Example: 
const line: Line = {
  type: "element",
  tagName: "span",
  children: [
    {
      type: "element",
      tagName: "span",
      children: [{ type: "text", value: "const" }],
      properties: {
        className: "css__token--keyword",
        style: { color: "#ff79c6" }
      }
    },
    // ... more tokens
  ],
  properties: {
    className: "css__line"
  }
};

​
Modifier

String literal type for line modifiers. 
type Modifier = `${(typeof modifiers)[number]}-line`;
Possible Values:
  • "highlighted-line" - Highlights the line
  • "added-line" - Marks the line as added (green background)
  • "removed-line" - Marks the line as removed (red background)

​
Modifiers

Non-empty array of modifier strings. 
type Modifiers = [Modifier, ...Modifier[]];
A tuple type ensuring at least one Modifier is present. Example: 
const mods: Modifiers = ["highlighted-line"];
const multiMods: Modifiers = ["highlighted-line", "added-line"];

​
LineNumbers

Non-empty array of line numbers. 
type LineNumbers = [number, ...number[]];
A tuple type ensuring at least one line number is present. Used to specify which lines should have modifiers applied. Example: 
const lines: LineNumbers = [1, 3, 5, 7];

​
LineWithModifiers

Extends Line with optional modifiers. 
type LineWithModifiers = Line & {
  modifiers?: Modifiers;
};
Example: 
const lineWithMods: LineWithModifiers = {
  type: "element",
  tagName: "span",
  children: [/* ... */],
  properties: {
    className: "css__line"
  },
  modifiers: ["highlighted-line", "added-line"]
};

​
ModifierInputMap

Configuration map for applying modifiers to specific line numbers. 
type ModifierInputMap = Partial<
  Record<`${(typeof modifiers)[number]}Lines`, LineNumbers>
>;
Example: 
const modifiers: ModifierInputMap = {
  highlightedLines: [1, 3, 5],
  addedLines: [2, 4],
  removedLines: [6]
};

​
CodeSyntacticSugarConfig

Configuration object for the Code Syntactic Sugar library. 
type CodeSyntacticSugarConfig = {
  modifiers?: ModifierInputMap;
};
Example: 
import { highlight } from "code-syntactic-sugar";

const config: CodeSyntacticSugarConfig = {
  modifiers: {
    highlightedLines: [1, 2, 3],
    addedLines: [5],
    removedLines: [7, 8]
  }
};

const result = highlight(code, config);

Build docs developers (and LLMs) love

Get started for freeTalk to us