tomdai/markdown-webview

`MarkdownWebView` is a surprisingly performant SwiftUI view that renders Markdown content.

Features

<details> <summary>Auto-adjusting View Height</summary>

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

</details>

<details> <summary>Text Selection</summary>

</details>

<details> <summary>Dynamic Content</summary>

https://user-images.githubusercontent.com/5054148/231708816-6c992197-893d-4d94-ae7c-2c6ce8d8c427.mp4

</details>

<details> <summary>Syntax Highlighting</summary> Code syntax is automatically highlighted. </details>

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 MarkdownWebView

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

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

Customize Style

The view comes with a default style (CSS files) that suits many use cases.

You can also supply your own stylesheet by setting the customStylesheet parameter in the initializer.

import SwiftUI
import MarkdownWebView

struct ContentView: View {
    @State private var markdownContent = "# Hello World"
    private let stylesheet: String? = try? .init(contentsOf: Bundle.main.url(forResource: "markdown", withExtension: "css")!)
    
    var body: some View {
        NavigationStack {
            MarkdownWebView(markdownContent, customStylesheet: stylesheet)
        }
    }
}

Handle Links

The view opens links with the default browser by default.

You can handle link activations yourself by setting the onLinkActivation parameter in the initializer.

import SwiftUI
import MarkdownWebView

struct ContentView: View {
    @State private var markdownContent = "# Hello apple.com"
    
    var body: some View {
        NavigationStack {
            MarkdownWebView(markdownContent)
                .onLinkActivation { url in
                    print(url)        
                }
        }
    }
}