Contents

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