Getting started

This guide walks you through installing Smalto and highlighting your first code snippet.

Prerequisites

Installation

Add Smalto to your Gleam project:

gleam add smalto

Quick example

Highlight a Python snippet as HTML:

import smalto
import smalto/languages/python

pub fn main() {
  let code = "print('hello, world!')"
  let html = smalto.to_html(code, python.grammar())
  // -> "<span class=\"smalto-function\">print</span>..."
}

Output formats

Smalto supports three output formats from the same grammar and source code.

HTML

Tokens are wrapped in <span> elements with smalto- prefixed CSS classes:

import smalto
import smalto/languages/python

let html = smalto.to_html("x = 42", python.grammar())
// -> "x <span class=\"smalto-operator\">=</span> <span class=\"smalto-number\">42</span>"

Style them with CSS. Smalto ships with 45 pre-built themes adapted from Prism.js — just include one and wrap your output:

<link rel="stylesheet" href="smalto-dracula.css">

<pre class="smalto"><code><!-- output from smalto.to_html() --></code></pre>

Browse all available themes in the themes/ directory.

Or write your own CSS targeting the smalto- prefixed classes:

.smalto-keyword { color: #c678dd; }
.smalto-string  { color: #98c379; }
.smalto-number  { color: #d19a66; }
.smalto-comment { color: #5c6370; font-style: italic; }
.smalto-function { color: #61afef; }

ANSI

Render with terminal color codes using the default theme:

import smalto
import smalto/languages/rust

let colored = smalto.to_ansi("fn main() {}", rust.grammar())

Or use a custom theme:

import gleam_community/ansi
import smalto
import smalto/ansi_theme
import smalto/languages/rust

let theme =
  ansi_theme.new()
  |> ansi_theme.keyword(ansi.bright_magenta)
  |> ansi_theme.function(ansi.bright_cyan)
  |> ansi_theme.string(ansi.green)

let colored = smalto.to_ansi_with("fn main() {}", rust.grammar(), theme)

See ANSI themes for full theme configuration.

Structured tokens

Access the raw token list for custom rendering:

import smalto
import smalto/languages/javascript
import smalto/token

let tokens = smalto.to_tokens("if (true) {}", javascript.grammar())
// [Keyword("if"), Whitespace(" "), Punctuation("("), ...]

Each token carries its type and matched text. See Tokens for details.

Next steps