SwiftUI显示Markdown

SwiftUI可以借助Markdown UI库、AttributedString等方法显示Markdown。

使用 MarkdownUI 库

MarkdownUI是目前最好的第三方库，支持完整的 Markdown 语法和代码高亮。

1、安装MarkdownUI

在Xcode中，找到File → Add Package Dependencies，输入：

https://github.com/gonzalezreal/swift-markdown-ui

将 MarkdownUI 添加到 Xcode 项目。

2、使用方式

import SwiftUI
import MarkdownUI

struct MarkdownView: View {
    let markdownContent = """
    # 欢迎学习 Swift
    
    这是一个 **粗体** 和 *斜体* 的例子。
    
    ## 代码示例
	```swift
    let greeting = "Hello, Swift!"
    print(greeting)
	```
    """
    
    var body: some View {
        ScrollView {
            Markdown(markdownContent)
                .padding()
        }
    }
}

显示样式：

自定义主题规则

1、使用内置主题

.markdownTheme(.gitHub)
.markdownTheme(.docC)
.markdownTheme(.basic)

例如：

Markdown(markdown)
    // 使用内置主题
    .markdownTheme(.gitHub)

2、代码块相关

.markdownCodeSyntaxHighlighter(.none)
.markdownCodeSyntaxHighlighter(.splash())
.markdownCodeSyntaxHighlighter(
    .splash(theme: .sunset)
)

注意：如果Swift多行字符串中，每一行的前导空格数量不一致，就会破坏缩进对齐规则。

例如：

    ## 代码示例
```swift    // 缩进不足，没有对齐

Xcode就会报错：

Insufficient indentation of line in multi-line string literal

常用操作

1、从本地加载Markdown文件

struct LessonView: View {
    @State private var content: String = ""
    let lessonFile: String  // 例如: "01-basics/01-variables"
    
    var body: some View {
        ScrollView {
            if !content.isEmpty {
                Markdown(content)
                    .markdownTheme(.gitHub)
                    .markdownCodeSyntaxHighlighter(.splash(theme: .sunset(withFont: .init(size: 14))))
                    .padding()
            } else {
                ProgressView("加载中...")
            }
        }
        .onAppear {
            loadMarkdown()
        }
    }
    
    func loadMarkdown() {
        // 方法 1: 从 Bundle 加载
        if let path = Bundle.main.path(forResource: lessonFile, ofType: "md"),
           let markdown = try? String(contentsOfFile: path) {
            content = markdown
        }
        
        // 方法 2: 从 Bundle URL 加载
        if let url = Bundle.main.url(forResource: lessonFile, withExtension: "md"),
           let markdown = try? String(contentsOf: url) {
            content = markdown
        }
    }
}

2、处理图片

// Markdown 文件中
"""
# 示例

![示例图片](example-image)

或使用网络图片：
![网络图片](https://example.com/image.png)
"""

// Swift 代码
Markdown(content)
    .markdownImageProvider(.asset)  // 从 Assets 加载本地图片

AttributedString（iOS 15+）

AttributedString 是 Swift 标准库中的一个字符串类型，用于处理带有属性的字符串（比如颜色、字体、链接等）。适合简单的 Markdown，不支持代码高亮。

import SwiftUI

struct NativeMarkdownView: View {
    let markdownText = """
    # 标题
    
    这是 **粗体** 和 *斜体*。
    
    - 列表项 1
    - 列表项 2
    """
    
    var body: some View {
        ScrollView {
            if let attributedString = try? AttributedString(
                markdown: markdownText) {
                Text(attributedString)
                    .padding()
            }
        }
    }
}

总结

简单的Markdown可以使用AttributedString，复杂或者需要代码高亮的Markdown，则建议使用MarkdownUI第三方库。

相关文章

1、Xcode SPM添加第三方库

2、Swift富文本AttributedString