markdown-webview

2.0.1

A performant SwiftUI Markdown view.
tomdai/markdown-webview

What's New

2.0.1

2023-05-16T16:17:46Z

Replaced a deprecated property (f0387fc, a50704f), thanks to @caocanx.

markdown-webview

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

I call it surprising because the underlying view is a WKWebView, yet a SwiftUI scroll view containing a bunch of MarkdownWebView still scrolls smoothly. A similar looking view built with native SwiftUI views doesn't have such performance (yet, hopefully).

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
Syntax Highlighting Code syntax is automatically highlighted.

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)        
                }
        }
    }
}

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)

Acknowledgements

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

Description

  • Swift Tools 5.8.0
View More Packages from this Author

Dependencies

  • None
Last updated: Sat May 25 2024 11:41:22 GMT-0900 (Hawaii-Aleutian Daylight Time)