Highlight

A code syntax highlighting component that renders formatted code blocks with language-specific syntax coloring, making code snippets more readable and visually appealing.

Basic Syntax Highlighting

The highlight component can be created by calling the UI::highlight() method with a language and code to display.

Preview Code
javascript
php
Features
The Highlight component offers several features for displaying code.
  • Syntax highlighting for numerous programming languages
  • Optional line numbers
  • Copy-to-clipboard functionality
  • Language indicator in header
  • Automatic height adjustment based on code length
Highlight Examples
Here are examples of different ways to use the highlight component.

PHP Syntax Highlighting

Highlighting for PHP code, showing function definition and usage.

Preview Code
php
php

Showing Line Numbers

The showLineNumbers() method enables line numbering in the code display.

Preview Code
css
php

Using Enum for Language

You can use the HighlightLanguage enum to specify the language for syntax highlighting.

Preview Code
typescript
php

HTML Syntax Highlighting

For HTML code, use HighlightLanguage::Markup to get proper syntax highlighting.

Preview Code
markup
php

SQL Syntax Highlighting

The component supports SQL queries with proper highlighting of keywords and structure.

Preview Code
sql
php

JSON Syntax Highlighting

JSON data can be displayed with proper syntax highlighting for keys, values, and different data types.

Preview Code
json
php

Markdown Syntax Highlighting

Markdown content can be displayed with proper syntax highlighting for headings, formatting, lists, and embedded code blocks.

Preview Code
markdown
php

API

The highlight component extends from HtmlElement so it has all its methods available.
API PHP

Common alternative names: Code Highlighter, Syntax Highlighter, Code Formatter, Code Display, Code Viewer, Code Block, Code Snippet

Types of Syntax Highlighting: Programming Language Highlighting (PHP, JavaScript, Python, etc.), Markup Language Highlighting (HTML, XML, Markdown), Query Language Highlighting (SQL, GraphQL), Data Format Highlighting (JSON, YAML, TOML), Configuration File Highlighting (INI, Properties), Shell Script Highlighting (Bash, PowerShell)

Principles

Readability Enhancement

Syntax highlighting improves code readability by visually distinguishing different code elements.

Visual Structure

Proper highlighting helps users understand code structure at a glance.

Language Recognition

Language-specific highlighting helps users identify the programming language being used.

Anatomy

Highlight Anatomy
  1. Code Container

    2. The outer wrapper that holds the code display

  2. Header

    3. Shows the language name and copy button

  3. Language Indicator

    4. Text showing which language is being displayed

  4. Copy Button

    5. Allows users to copy the code to clipboard

  5. Code Display

    6. The syntax-highlighted code content

  6. Line Numbers

    7. Optional numbered lines (when enabled)

Usage

Use the Highlight component when you need to display code snippets in your application. It's particularly effective for documentation, tutorial content, code examples, configuration guides, API references, error displays, and developer tools.