Skip to content
Phiki
Documentation/Highlighting code

Highlighting code

Learn how to highlight code snippets with Phiki.

To generate syntax highlighted code snippets with Phiki, you can use the Phiki::codeToHtml() method.

use Phiki\Phiki;
use Phiki\Grammar\Grammar;
use Phiki\Theme\Theme;

$html = (new Phiki)
    ->codeToHtml("<?php echo ...", Grammar::Php, Theme::GithubLight)
    ->toString();

This method takes three parameters:

  1. The code you want to highlight as a string.
  2. The grammar (or language) of the code.
  3. The theme you want to use for highlighting.

Phiki ships with several grammars and themes out of the box. You can find the full list of available grammars and themes in the Available grammars and themes reference page.

Styling

Phiki applies all of its styling using inline style attributes, so there's no need to add any CSS to your project to get started.

However, you may want to add some basic styles to the <pre> element that Phiki generates to improve the overall appearance of code blocks. Here is a sample CSS snippet you can use:

pre {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.875rem; /* 14px */
    padding: 1rem 1.5rem; /* 16px 24px */
    border-radius: 0.375rem; /* 6px */
    overflow-x: auto;
}

Gutter

By default, Phiki does not include a gutter (line numbers) in the generated HTML. However, you can enable it by calling the withGutter() method on the result of codeToHtml().

use Phiki\Phiki;
use Phiki\Grammar\Grammar;
use Phiki\Theme\Theme;

$html = (new Phiki)
    ->codeToHtml("<?php echo ...", Grammar::Php, Theme::GithubLight)
    ->withGutter()
    ->toString();

This will add a gutter to the left side of the code block with line numbers for each line of code.

The line number elements use the editorLineNumber.foreground styles provided by your chosen theme, but you can override these styles using CSS.

.line-number {
    /* Your custom styles go here. */
}

Changing the starting line number

If you wish to change the starting line number from the default of 1, you can use the startingLine() method.

use Phiki\Phiki;
use Phiki\Grammar\Grammar;
use Phiki\Theme\Theme;

$html = (new Phiki)
    ->codeToHtml("<?php echo ...", Grammar::Php, Theme::GithubLight)
    ->withGutter()
    ->startingLine(5)
    ->toString();

The first line of code will now be numbered 5, the second line 6, and so on.

ANSI Terminal Output

Phiki includes special support for highlighting terminal output containing ANSI escape codes. This is useful for displaying colorized command-line output, build logs, or any text that includes ANSI color sequences.

use Phiki\Phiki;
use Phiki\Grammar\Grammar;
use Phiki\Theme\Theme;

// Terminal output with ANSI escape codes
$terminalOutput = "\x1b[32m✓ All tests passed\x1b[0m\n\x1b[31m✗ 2 errors found\x1b[0m";

$html = (new Phiki)
    ->codeToHtml($terminalOutput, Grammar::Ansi, Theme::GithubDark)
    ->toString();

The ANSI grammar supports:

  • Standard colors: Black, red, green, yellow, blue, magenta, cyan, white (codes 30-37, 40-47)
  • Bright colors: Bright variants of standard colors (codes 90-97, 100-107)
  • 256-color mode: Extended palette using \x1b[38;5;Nm syntax
  • True color (RGB): Full RGB support using \x1b[38;2;R;G;Bm syntax
  • Text decorations: Bold, italic, underline, strikethrough, dim, reverse

You can also use 'ansi' or 'terminal' as string aliases:

$html = (new Phiki)
    ->codeToHtml($terminalOutput, 'ansi', Theme::GithubDark)
    ->toString();

Theme colors from terminal.ansi* keys (e.g., terminal.ansiRed) are used when available, with VSCode-compatible defaults as fallback.