SwiftMarkdownView

English | 日本語

A SwiftUI-native Markdown rendering library. Integrates with DesignSystem for beautiful Markdown display.

Features

• SwiftUI Native: High-performance rendering using NSTextStorage + TextKit 2
• DesignSystem Integration: Seamless integration with ColorPalette, Typography, and Spacing
• Optional Syntax Highlighting: 50+ languages via separate HighlightJS module
• Rich Element Support: Tables, task lists, images, Mermaid diagrams, math (LaTeX), and more
• Customizable: Style configuration through environment values

Quick Start

import SwiftUI
import SwiftMarkdownView

struct ContentView: View {
    var body: some View {
        MarkdownView("""
        # Hello, Markdown!

        This is a **bold** and *italic* text.

        ```swift
        let greeting = "Hello, World!"
        print(greeting)
        ```

        - [x] Task completed
        - [ ] Task pending
        """)
    }
}

Installation

Swift Package Manager

Add to your Package.swift:

dependencies: [
    .package(url: "https://github.com/no-problem-dev/swift-markdown-view.git", from: "1.4.3")
]

Add to your target:

.target(
    name: "YourTarget",
    dependencies: [
        .product(name: "SwiftMarkdownView", package: "swift-markdown-view"),
        // For syntax highlighting (optional)
        .product(name: "SwiftMarkdownViewHighlightJS", package: "swift-markdown-view")
    ]
)

Supported Elements

Block Elements

Inline Elements

Syntax Highlighting

Default Behavior

By default, code blocks are displayed without highlighting.

HighlightJS Highlighting

To enable syntax highlighting with 50+ languages, use the optional module:

import SwiftMarkdownView
import SwiftMarkdownViewHighlightJS

// Recommended: Adaptive highlighting (auto light/dark mode)
MarkdownView(source)
    .adaptiveSyntaxHighlighting()

// With specific theme
MarkdownView(source)
    .adaptiveSyntaxHighlighting(theme: .github)

// Manual configuration
MarkdownView(source)
    .syntaxHighlighter(
        HighlightJSSyntaxHighlighter(theme: .atomOne, colorMode: .dark)
    )

Available Themes: .a11y (accessibility recommended), .xcode, .github, .atomOne, .solarized, .tokyoNight

Custom Highlighter

Implement your own highlighting logic:

struct MyHighlighter: SyntaxHighlighter {
    func highlight(_ code: String, language: String?) async throws -> AttributedString {
        var result = AttributedString(code)
        // Custom implementation
        return result
    }
}

MarkdownView(source)
    .syntaxHighlighter(MyHighlighter())

Asides (Callouts)

Blockquotes are interpreted as callouts such as Note, Warning, and Tip.

MarkdownView("""
> Note: This is supplementary information.

> Warning: This requires attention.

> Tip: Here's a helpful tip.
""")

Supported Kinds: Note, Tip, Important, Warning, Experiment, Attention, Bug, ToDo, SeeAlso, Throws, and 24 more + custom

Mermaid Diagrams

Code blocks with mermaid language are rendered as diagrams.

MarkdownView("""
```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[OK]
    B -->|No| D[Cancel]

""")

**Supported Diagrams**: flowchart, sequence, class, state, gantt, journey, timeline, mindmap

**Requirements**:
- iOS 26+, macOS 26+: Native WebKit rendering
- Earlier versions: Fallback display (shown as code block)

## DesignSystem Theme

```swift
MarkdownView("# Themed Markdown")
    .environment(\.colorPalette, .dark)
    .environment(\.typographyScale, .large)

Module Structure

Dependencies

Documentation

• API Reference: DocC Documentation

License

MIT License - See LICENSE for details.