weihas/wkmarkdownview
A lightweight Swift component for rendering **Markdown** and **KaTeX math** inside a `WKWebView`, all using **local resources**.
Features
- ✅ Render Markdown via marked.js
- ✅ Support for inline and block LaTeX using KaTeX
- ✅ Light/Dark mode via
prefers-color-scheme - ✅ Modern async Swift API using
async/await - ✅ Dynamically get content height for flexible layouts
- ✅ Fully offline: all resources are bundled locally
- ✅ SwiftUI support with automatic height adjustment
Requirements
- iOS 13.0+
- Swift 5.5+
- Xcode 13.0+
Installation
Swift Package Manager
To install WKMarkdownView using the Swift Package Manager, add it to the dependencies in your Package.swift file:
dependencies: [
.package(url: "https://github.com/weihas/WKMarkdownView.git", from: "1.0.0")
]Quick Start
WKMarkdownView offers a native SwiftUI view that automatically handles rendering and resizing. This is the easiest way to get started.
import WKMarkdownView
import SwiftUI
struct ContentView: View {
let markdown = """
# Welcome to SwiftUI
This is **Markdown** rendered in SwiftUI.
You can also write math: $E = mc^2$.
$$
\\int_a^b f(x) \\, dx
$$
"""
var body: some View {
ScrollView {
MarkdownView(markdown)
.padding()
}
}
}Advanced Usage
UIKit Integration
You can also use WKMarkdownView directly in a UIKit project.
import UIKit
import WKMarkdownView
import WebKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
// 1. Create a markdown view instance
// LaTeX support is enabled by default
let markdownView = WKMarkdownView()
view.addSubview(markdownView)
// 2. Set its frame
markdownView.frame = view.bounds
markdownView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
// 3. Load the markdown content
let markdown = """
# Hello from UIKit
This is **Markdown** with math support:
Inline math: $E = mc^2$
Block math:
$$
\\frac{a}{b} = c
$$
"""
Task {
try? await markdownView.updateMarkdown(markdown)
}
}
}Getting Content Height
For manual layout calculations, you can asynchronously retrieve the rendered content's height.
Task {
if let height = try? await markdownView.contentHeight() {
// Use the height for your layout...
print("Content height: \\(height)")
}
}Disabling LaTeX Support
If you don't need math rendering, you can disable it during initialization to save resources.
// Create a markdown view without LaTeX/math support
let markdownView = WKMarkdownView(enableLatex: false)Contributing
Contributions, issues, and feature requests are welcome! Feel free to check the issues page.
License
WKMarkdownView is available under the MIT license. See the LICENSE file for more info.
Package Metadata
Repository: weihas/wkmarkdownview
Default branch: main
README: README.md