MarkdownView

Display markdown content with SwiftUI.

Overview

MarkdownView offers a super easy and highly customizable way to display markdown content in your app.

It leverages swift-markdown to parse markdown content, fully compliant with the CommonMark Spec.

Supported Platforms

You can use MarkdownView in the following platforms:

• macOS 13.0+
• iOS 16.0+
• watchOS 9.0+
• tvOS 16.0+
• visionOS 1.0+

Highlighted Features

• Fully compliant with CommonMark
• Support SVG rendering
• Support inline math rendering
• Highly Customizable and Extensible
  • Fonts
  • Code Highlighter Themes
  • Tint Colors
  • Block Directives
  • Custom Images
• Fully Native SwiftUI implementations

Getting started

Displaying Contents

You can create a Markdown view by providing a markdown text.

let markdownText = """
# MarkdownView

This is [MarkdownView](https://github.com/liyanan2004/MarkdownView).

MarkdownView offers a super easy and highly customizable way to display markdown content in your app. It leverages swift-markdown to parse markdown content, fully compliant with the CommonMark Spec.

MarkdownView supports adavanced rendering features like SVG, Inline Math, as well as code highlighting.
"""

MarkdownView(markdownText)

Customizing Appearance

You can set custom font group or change font for a specific kind of markdown markup.

MarkdownView("# H1 title")
    .font(.largeTitle.weight(.black), for: .h1)

Adding tint color for code blocks and quote blocks. Default is the accent color.

You can customize them explicitly.

MarkdownView("> Quote and `inline code`")
    .tint(.pink, for: .inlineCodeBlock)

Extend Rendering

You can add your custom image providers and block directive providers to display your content.

To do that, first create your provider.

struct CustomImageProvider: ImageDisplayable {
    func makeImage(url: URL, alt: String?) -> some View {
        AsyncImage(url: url) {
            switch $0 {
            case .empty: ProgressView()
            case .success(let image): image.resizable()
            case .failure(let error): Text(error.localizedDescription)
            @unknown default: Text("Unknown situation")
            }
        }
    }
}

Then apply your provider to MarkdownView.

MarkdownView(markdownText)
    .imageProvider(CustomImageProvider(), forURLScheme: "my-image")

The implementation of the block directive is exactly the same way.

Documentation

For more detailed documentation, check out the documentation page hosted on Swift Package Index.

Swift Package Manager

In your Package.swift Swift Package Manager manifest, add the following dependency to your dependencies argument:

.package(url: "https://github.com/LiYanan2004/MarkdownView.git", .branch("main")),

Add the dependency to any targets you've declared in your manifest:

.target(name: "MyTarget", dependencies: ["MarkdownView"]),

Dependencies

• apple/swift-markdown: Parsing & Visiting documents.
• raspu/Highlightr: Code Highlighting.
• colinc86/LaTeXSwiftUI: Math Rendering.