MarkdownUI 是一个强大的库，用于在 SwiftUI 中显示和自定义 Markdown 文本。它与 GitHub Flavored Markdown Spec 兼容，除了样式化的文本和链接外，还可以显示图像、标题、列表（包括任务列表）、引用、代码块、表格和主题分隔符。

MarkdownUI 提供了易于理解的主题功能，可以自定义 Markdown 文本的显示方式。您可以使用内置主题，创建自己的主题或覆盖特定的文本和块样式。

某些功能，如显示表格或多图像段落，需要 macOS 13.0+、iOS 16.0+、tvOS 16.0+ 和 watchOS 9.0+。

Markdown 视图使用 Markdown 语法显示丰富的结构化文本。除了样式化的文本和链接外，它可以显示图像、标题、列表（包括任务列表）、引用、代码块、表格和主题分隔符。

创建 Markdown 视图最简单的方法是将 Markdown 字符串传递给 init(_:baseURL:imageBaseURL:) 初始化器。

let markdownString = """
  ## Try MarkdownUI

  **MarkdownUI** is a native Markdown renderer for SwiftUI
  compatible with the
  [GitHub Flavored Markdown Spec](https://github.github.com/gfm/).
  """

var body: some View {
  Markdown(markdownString)
}

创建 Markdown 视图更方便的方法是使用 init(baseURL:imageBaseURL:content:) 初始化器，它接受一个 Markdown 内容构建器，您可以在其中通过提供 Markdown 字符串或使用富有表现力的领域特定语言来组合视图内容。

var body: some View {
  Markdown {
    """
    ## Using a Markdown Content Builder
    Use Markdown strings or an expressive domain-specific language
    to build the content.
    """
    Heading(.level2) {
      "Try MarkdownUI"
    }
    Paragraph {
      Strong("MarkdownUI")
      " is a native Markdown renderer for SwiftUI"
      " compatible with the "
      InlineLink(
        "GitHub Flavored Markdown Spec",
        destination: URL(string: "https://github.github.com/gfm/")!
      )
      "."
    }
  }
}

您也可以在模型层中创建 MarkdownContent 值，然后通过将内容值传递给 init(_:baseURL:imageBaseURL:) 初始化器来创建 Markdown 视图。MarkdownContent 值预先解析 Markdown 字符串，从而避免视图执行此步骤。

// Somewhere in the model layer
let content = MarkdownContent("You can try **CommonMark** [here](https://spec.commonmark.org/dingus/).")

// Later in the view layer
var body: some View {
  Markdown(self.model.content)
}

Markdown 视图使用基本默认主题来显示内容。有关更多信息，请阅读关于 basic 主题。

Markdown {
  """
  You can quote text with a `>`.

  > Outside of a dog, a book is man's best friend. Inside of a
  > dog it's too dark to read.

  – Groucho Marx
  """
}

您可以使用 markdownTheme(_:) 修饰符应用不同的主题来定制 Markdown 内容的外观。例如，您可以将内置主题之一（例如 gitHub）应用于 Markdown 视图或包含 Markdown 视图的视图层次结构。

Markdown {
  """
  You can quote text with a `>`.

  > Outside of a dog, a book is man's best friend. Inside of a
  > dog it's too dark to read.

  – Groucho Marx
  """
}
.markdownTheme(.gitHub)

要覆盖当前主题中的特定文本样式，请使用 markdownTextStyle(_:textStyle:) 修饰符。以下示例显示了如何覆盖 code 文本样式。

Markdown {
  """
  Use `git status` to list all new or modified files
  that haven't yet been committed.
  """
}
.markdownTextStyle(\.code) {
  FontFamilyVariant(.monospaced)
  FontSize(.em(0.85))
  ForegroundColor(.purple)
  BackgroundColor(.purple.opacity(0.25))
}

您还可以使用 markdownBlockStyle(_:body:) 修饰符来覆盖特定的块样式。例如，您可以仅覆盖 blockquote 块样式，而保留其他块样式不变。

Markdown {
  """
  You can quote text with a `>`.

  > Outside of a dog, a book is man's best friend. Inside of a
  > dog it's too dark to read.

  – Groucho Marx
  """
}
.markdownBlockStyle(\.blockquote) { configuration in
  configuration.label
    .padding()
    .markdownTextStyle {
      FontCapsVariant(.lowercaseSmallCaps)
      FontWeight(.semibold)
      BackgroundColor(nil)
    }
    .overlay(alignment: .leading) {
      Rectangle()
        .fill(Color.teal)
        .frame(width: 4)
    }
    .background(Color.teal.opacity(0.5))
}

自定义 Markdown 内容外观的另一种方法是创建自己的主题。要创建主题，首先实例化一个空的 Theme，并将不同的文本和块样式链接在一起形成一个表达式。

extension Theme {
  static let fancy = Theme()
    .code {
      FontFamilyVariant(.monospaced)
      FontSize(.em(0.85))
    }
    .link {
      ForegroundColor(.purple)
    }
    // More text styles...
    .paragraph { configuration in
      configuration.label
        .relativeLineSpacing(.em(0.25))
        .markdownMargin(top: 0, bottom: 16)
    }
    .listItem { configuration in
      configuration.label
        .markdownMargin(top: .em(0.25))
    }
    // More block styles...
}

Swift Package Index 友好地托管了所有版本的在线文档，可在此处获取

您可以通过参考以下文章和第三方资源来了解有关 MarkdownUI 的更多信息

MarkdownUI 还有一些其他的技巧。您可以浏览配套演示项目，并发现其完整的功能集。

要在 Swift Package Manager 项目中使用 MarkdownUI，请将以下行添加到 Package.swift 文件中的依赖项

.package(url: "https://github.com/gonzalezreal/swift-markdown-ui", from: "2.0.2")

.target(name: "<target>", dependencies: [
  .product(name: "MarkdownUI", package: "swift-markdown-ui")
]),

MarkdownUI

概述

最低要求

快速开始

创建 Markdown 视图

样式化 Markdown

文档

相关内容

演示

安装

将 MarkdownUI 添加到 Swift 包

将 MarkdownUI 添加到 Xcode 项目