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).
https://user-images.githubusercontent.com/5054148/231708816-6c992197-893d-4d94-ae7c-2c6ce8d8c427.mp4
Add this package as a dependency.
See the article “Adding package dependencies to your app” to learn more.
import SwiftUI
import MarkdownWebView
struct ContentView: View {
@State private var markdownContent = "# Hello World"
var body: some View {
NavigationStack {
MarkdownWebView(markdownContent)
}
}
}
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)
}
}
}
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)
}
}
}
}
The underlying web view loads an HTML string. For the package to work in a macOS app, enable the “Outgoing Connections (Client)” capability.
Portions of this package may utilize the following copyrighted material, the use of which is hereby acknowledged.