Skip to main content

​
Overview

CodeView is a native view component (UIView/NSView) that displays code blocks with syntax highlighting, line numbers, and interactive controls. It uses Tree-sitter for fast, accurate syntax highlighting across multiple programming languages.

​
Class Definition

final class CodeView: UIView

​
Properties

​
theme
MarkdownTheme
default:".default"
The theme used for styling the code view, including fonts and colors.
var theme: MarkdownTheme
​
language
String
default:""
The programming language identifier for syntax highlighting. When empty, displays code icon. Supported languages include: swift, python, javascript, typescript, go, rust, c, cpp, java, ruby, bash, json, html, css, csharp, kotlin, sql, yaml, and their aliases.
var language: String
​
content
String
default:""
The code content to display. When set, automatically triggers syntax highlighting and updates line numbers.
var content: String
​
highlightMap
CodeHighlighter.HighlightMap
A dictionary mapping NSRange to PlatformColor for syntax highlighting. Generated by CodeHighlighter.
var highlightMap: CodeHighlighter.HighlightMap
​
previewAction
((String?, NSAttributedString) -> Void)?
default:"nil"
Optional closure called when the preview button is tapped. Receives the language name and attributed text.
var previewAction: ((String?, NSAttributedString) -> Void)?

​
Methods

​
intrinsicHeight(for:theme:)
static func
Calculates the intrinsic height required to display the given content.
static func intrinsicHeight(
    for content: String,
    theme: MarkdownTheme = .default
) -> CGFloat
Parameters:
  • content: The code string to measure
  • theme: The theme to use for font sizing
Returns: The calculated height in points

​
Subviews

​
barView
UIView / NSView
The top bar containing the language label and action buttons.
​
languageLabel
UILabel / NSTextField
Label displaying the programming language name.
​
copyButton
UIButton / NSButton
Button that copies the code content to the clipboard.
​
previewButton
UIButton / NSButton
Button that triggers the preview action. Only visible when previewAction is set.
​
lineNumberView
LineNumberView
Custom view that displays line numbers aligned with the code.
​
textView
LTXLabel
The text view displaying the syntax-highlighted code.
​
scrollView
UIScrollView / NSScrollView
Scroll view containing the text view for horizontal scrolling.

​
CodeHighlighter

​
Overview

CodeHighlighter is a singleton that provides syntax highlighting using Tree-sitter grammars. It maintains an internal cache for performance. 
public final class CodeHighlighter

​
Singleton Instance

public static let current: CodeHighlighter

​
Types

public typealias HighlightMap = [NSRange: PlatformColor]
A dictionary mapping text ranges to their syntax highlight colors.

​
Methods

​
highlight(key:content:language:theme:)
func
Highlights code content and returns a color map.
public func highlight(
    key: Int?,
    content: String,
    language: String?,
    theme: MarkdownTheme = .default
) -> [NSRange: PlatformColor]
Parameters:
  • key: Optional cache key (computed if nil)
  • content: The code to highlight
  • language: Language identifier
  • theme: Theme for color selection
Returns: Dictionary mapping ranges to colors
​
key(for:language:)
func
Generates a cache key for content and language.
public func key(
    for content: String,
    language: String?
) -> Int

​
HighlightMap Extension

​
apply(to:with:)
func
Applies the highlight map to a string, producing an attributed string.
public func apply(
    to content: String,
    with theme: MarkdownTheme
) -> NSMutableAttributedString
Parameters:
  • content: The plain text content
  • theme: Theme providing fonts and base colors
Returns: Attributed string with syntax highlighting applied

​
Supported Languages

The following languages are supported with their aliases:
  • Swift: swift
  • Python: python, py, python3
  • JavaScript: javascript, js, jsx
  • TypeScript: typescript, ts
  • TSX: tsx
  • Go: go, golang
  • Rust: rust, rs
  • C: c, h
  • C++: cpp, c++, cc, cxx, hpp
  • Java: java
  • Ruby: ruby, rb
  • Bash: bash, sh, shell, zsh
  • JSON: json, jsonc
  • HTML: html, htm
  • CSS: css
  • C#: csharp, c#, cs
  • Kotlin: kotlin, kt, kts
  • SQL: sql
  • YAML: yaml, yml

​
CodeViewConfiguration

Internal configuration constants for code view layout: 
enum CodeViewConfiguration {
    static let barPadding: CGFloat = 8
    static let codePadding: CGFloat = 8
    static let codeLineSpacing: CGFloat = 4
    static let lineNumberWidth: CGFloat = 40
    static let lineNumberPadding: CGFloat = 8
}

​
Example Usage

let codeView = CodeView()
codeView.theme = .default
codeView.language = "swift"
codeView.content = """
func greet(name: String) {
    print("Hello, \(name)!")
}
"""

// Apply syntax highlighting
let highlighter = CodeHighlighter.current
let highlightMap = highlighter.highlight(
    key: nil,
    content: codeView.content,
    language: "swift"
)
codeView.highlightMap = highlightMap

// Optional: Add preview action
codeView.previewAction = { language, attributedText in
    print("Preview tapped for \(language ?? "unknown")")
}

​
Accessibility

CodeView provides accessibility support:
  • accessibilityLabel: ” code block” (e.g., “Swift code block”)
  • accessibilityValue: The code content as plain text
  • Individual UI elements are configured for proper VoiceOver navigation

​
Related Components

Build docs developers (and LLMs) love

Get started for freeTalk to us