Kolmo Syntax Highlighter

An elegant syntax highlighter for the Kolmo language, using TypeScript.

Features

• Syntax highlighting for Kolmo language
• Multiple theme options:
  • Catppuccin Frappé
  • One Dark
  • JetBrains Fleet
• Support for:
  • Comments
  • Characters
  • Numbers
  • Constructors
  • Special symbols (λ, Π, ∀, etc.)
  • Operators
  • Declaration and definition keywords
  • Control flow and match structures
  • Delimiters and punctuation
  • Variables

How to Use

1. Include the required files in your HTML:

<link rel="stylesheet" href="dist/kolmo.css">
<script src="dist/kolmo-syntax.js"></script>

2. Add the kolmo-syntax class to the element containing Kolmo code:

<div class="kolmo-syntax">
    // Your Kolmo code here
</div>

3. Initialize the highlighter with options:

<script>
    // Initialize with default theme (Frappé)
    init();

    // Or specifies a theme
    init({ theme: 'one-dark' });

    // You can also set it later
    setTheme('frappe');
</script>

Development

Prerequisites

• Node.js
• TypeScript

Installation

npm install

Scripts

• npm run build - Compiles TypeScript and copies CSS files
• npm run watch - Watches for changes in TypeScript files
• npm run clean - Cleans the distribution folder

Project Structure

• src/
  • syntax.ts - TypeScript source code
  • kolmo.css - Styles and color theme
• dist/ - Compiled JavaScript and processed CSS
• index.html - Usage example
• tsconfig.json - TypeScript configuration

Color Theme

The project uses the Catppuccin Frappé theme, providing a pleasant and high-contrast visual experience. Colors are defined as CSS variables for easy customization.

Customization

Theme Configuration via TypeScript

You can configure the theme programmatically:

1. Using the init function with options:

init({ theme: 'frappe' }); // or 'one-dark'

2. Changing theme at runtime:

setTheme('one-dark'); // or 'frappe'

The theme selection is persisted in localStorage and will be restored on page reload.

Fonts and Styling via CSS

You can customize fonts and other styles by creating your own configuration file. Include it after the base CSS and theme files:

<link rel="stylesheet" href="dist/kolmo.css">
<link rel="stylesheet" href="dist/themes/frappe.css">  <!-- or other theme -->
<link rel="stylesheet" href="path/to/your-config.css">

Available font variables:

:root {
  --kolmo-font-family: 'Your Font', monospace;
  --kolmo-font-size: 16px;
  --kolmo-line-height: 1.6;
  --kolmo-font-weight-normal: 400;
  --kolmo-font-weight-bold: 600;
}

Optional styling variables:

:root {
  --kolmo-block-padding: 1.5rem;
  --kolmo-block-border-radius: 8px;
}

See themes/config.css for a complete example of customization options.

Theme Customization

The project uses the Catppuccin Frappé theme by default. You can create your own theme by overriding the CSS variables:

1. Create a new CSS file (e.g., my-theme.css)
2. Define your color variables:

:root {
  --kolmo-comment: #666666;      /* Comments */
  --kolmo-char: #98c379;         /* Characters */
  --kolmo-number: #d19a66;       /* Numbers */
  --kolmo-constructor: #c678dd;  /* Constructors */
  --kolmo-symbol: #56b6c2;       /* Special symbols (λ, Π, ∀) */
  --kolmo-operator: #e06c75;     /* Operators */
  --kolmo-declaration: #c678dd;  /* Keywords: data, import */
  --kolmo-definition: #d19a66;   /* Keywords: def, gen */
  --kolmo-control: #e5c07b;      /* Keywords: if, else, case */
  --kolmo-variable: #61afef;     /* Variables */
  --kolmo-match: #98c379;        /* Keywords: match, switch */
  --kolmo-delimiter: #c678dd;    /* Delimiters: (), [], {} */
  --kolmo-punctuation: #e5c07b;  /* Punctuation: , ; : . */
}

/* Optional: Override the background and text colors */
.kolmo-syntax {
  color: #abb2bf;               /* Default text color */
  background-color: #282c34;    /* Background color */
}

3. Include your theme file after the default theme:

<link rel="stylesheet" href="dist/kolmo.css">
<link rel="stylesheet" href="path/to/my-theme.css">

Available theme variables and their usage:

| Variable | Description | |----------|-------------| | --kolmo-comment | Single-line comments starting with // | | --kolmo-char | Character literals | | --kolmo-number | Numeric literals | | --kolmo-constructor | Constructors (#Name), <>, ->, [] | | --kolmo-symbol | Special symbols like λ, Π, ∀ | | --kolmo-operator | Mathematical and logical operators | | --kolmo-declaration | Declaration keywords (data, import) | | --kolmo-definition | Definition keywords (def, gen) | | --kolmo-control | Control flow keywords | | --kolmo-variable | Variable names | | --kolmo-match | Pattern matching keywords | | --kolmo-delimiter | Brackets and parentheses | | --kolmo-punctuation | Punctuation marks |