GitHubHelp

SilverMarcs/SwiftMarkdownViewWeb

★ 0Forks 0CSSGitHub ↗Compare

README

SwiftMarkdownView

SwiftMarkdownView is a surprisingly performant SwiftUI view that renders Markdown content.

I call it surprising because the underlying view is a WKWebView,

Requirement for macOS Apps

The underlying web view loads an HTML string. For the package to work in a macOS app, enable the "Outgoing Connections (Client)" capability.

What it looks like in Xcode

Outgoing Connections (Client)

v3.mp4

Features

Auto-adjusting View Height

The view's height is always the content's height.

Auto-adjusting View Height
Text Selection Text Selection
Dynamic Content
v3.mp4
Code Block Themes Multiple predefined themes are available for syntax highlighting, including GitHub, Atom, Tokyo Night, and more.
Text Highlighting Highlight specific text within the markdown content for search or emphasis.
Font Size Customization Easily adjust the font size of the rendered content.

Supported Platforms

  • macOS 11 and later
  • iOS 14 and later

Installation

Add this package as a dependency.

See the article “Adding package dependencies to your app” to learn more.

Usage

Display Markdown Content

import SwiftUI
import SwiftMarkdownView

struct ContentView: View {
    @State private var markdownContent = "# Hello World"

    var body: some View {
        NavigationStack {
            SwiftMarkdownView(markdownContent)
        }
    }
}

Customize Font Size

import SwiftUI
import SwiftMarkdownView

struct ContentView: View {
    @State private var markdownContent = "# Hello World"

    var body: some View {
        NavigationStack {
            SwiftMarkdownView(
                markdownContent,
                fontSize: 18
            )
        }
    }
}

Use Different Code Block Themes

import SwiftUI
import SwiftMarkdownView

struct ContentView: View {
    @State private var markdownContent = """
    # Code Example
    ```swift
    print("Hello, World!")
    ```
    """

    var body: some View {
        NavigationStack {
            SwiftMarkdownView(
                markdownContent,
                codeBlockTheme: .tokyo
            )
        }
    }
}

Available themes: .github (default), .atom, .a11y, .panda, .paraiso, .stackoverflow, .tokyo

Highlight Text

import SwiftUI
import SwiftMarkdownView

struct ContentView: View {
    @State private var markdownContent = "# Hello World\nThis is some sample text."
    @State private var searchText = "sample"

    var body: some View {
        NavigationStack {
            SwiftMarkdownView(
                markdownContent,
                highlightString: searchText
            )
        }
    }
}

Get Calculated Height

import SwiftUI
import SwiftMarkdownView

struct ContentView: View {
    @State private var markdownContent = "# Hello World"
    @State private var contentHeight: CGFloat = 0

    var body: some View {
        NavigationStack {
            SwiftMarkdownView(
                markdownContent,
                calculatedHeight: $contentHeight
            )

            Text("Content height: \(contentHeight)")
        }
    }
}

All Parameters

SwiftMarkdownView(
    markdownContent,                    // The markdown string to render
    calculatedHeight: $height,          // Binding to get the calculated content height
    fontSize: 16,                       // Font size (default: 16)
    highlightString: "search term",     // Text to highlight (default: "")
    baseURL: "https://example.com",     // Base URL for relative links (default: "")
    codeBlockTheme: .github            // Code syntax theme (default: .github)
)

Link Handling

Links are automatically opened in the default browser. Currently, custom link handling is not supported but may be added in future versions.

The underlying web view loads an HTML string. For the package to work in a macOS app, enable the “Outgoing Connections (Client)” capability.

What it looks like in Xcode

Outgoing Connections (Client)

Requirement for macOS Apps

Acknowledgements

Portions of this package may utilize the following copyrighted material, the use of which is hereby acknowledged.

Contributors

SilverMarcs

Issues