For anyone still looking for a working SwiftUI + Highlightr setup on macOS, here's what worked for us in Fazm (a macOS chat app that renders code blocks with syntax highlighting):

The approach: wrap NSTextView in NSViewRepresentable, feed it Highlightr.highlight() output as an NSAttributedString.

Critical gotcha that took us a while to debug: if you put this NSTextView wrapper inside a SwiftUI ScrollView(.horizontal) (for horizontally scrollable code blocks), the text will be completely invisible - the container shows up but the text doesn't render. The accessibility tree confirms text is there, but visually it's blank.

Root cause: widthTracksTextView = true (the common default) makes the text container collapse to zero width inside a horizontal ScrollView because intrinsicContentSize returns noIntrinsicMetric for width.

Fix: add a noWrap mode for code blocks:

struct PlainCopyText: NSViewRepresentable {
    let attributedString: NSAttributedString
    var noWrap: Bool = false  // true for code blocks in horizontal ScrollView

    func makeNSView(context: Context) -> NSTextView {
        let tv = NSTextView()
        tv.isEditable = false
        tv.isSelectable = true
        tv.drawsBackground = false
        tv.textContainerInset = .zero
        tv.textContainer?.lineFragmentPadding = 0
        
        if noWrap {
            tv.textContainer?.widthTracksTextView = false
            tv.textContainer?.containerSize = NSSize(
                width: CGFloat.greatestFiniteMagnitude,
                height: CGFloat.greatestFiniteMagnitude
            )
            tv.isHorizontallyResizable = true
        } else {
            tv.textContainer?.widthTracksTextView = true
            tv.isHorizontallyResizable = false
        }
        tv.isVerticallyResizable = true
        return tv
    }
    // ...
}

And override intrinsicContentSize to report actual width in no-wrap mode:

override var intrinsicContentSize: NSSize {
    guard let lm = layoutManager, let tc = textContainer else {
        return super.intrinsicContentSize
    }
    lm.ensureLayout(for: tc)
    let rect = lm.usedRect(for: tc)
    let width = tc.widthTracksTextView
        ? NSView.noIntrinsicMetric
        : ceil(rect.width)
    return NSSize(width: width, height: ceil(rect.height))
}

Then use it like:

// Highlighted code block with horizontal scrolling
let codeAttr = highlightr.highlight(code, as: language)
ScrollView(.horizontal, showsIndicators: false) {
    PlainCopyText(attributedString: codeAttr, noWrap: true)
}
.background(Color(hex: 0x282C34))  // atom-one-dark bg

Full implementation: https://github.com/m13v/fazm/blob/main/Desktop/Sources/MainWindow/Components/SelectableMarkdown.swift

Better SwiftUI Support #79

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions