MarkdownUI

在SwiftUI中显示和自定义Markdown文本。

• 概述
• 最低要求
• 入门
  • 创建Markdown视图
  • 样式化Markdown
• 文档
  • 相关内容
• 演示
• 安装

概述

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

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

最低要求

你可以在以下平台上使用MarkdownUI：

• macOS 12.0+
• iOS 15.0+
• tvOS 15.0+
• watchOS 8.0+

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

入门

创建Markdown视图

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

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

let markdownString = """
  ## 尝试MarkdownUI

  **MarkdownUI**是一个原生的SwiftUI Markdown渲染器，
  兼容[GitHub Flavored Markdown规范](https://github.github.com/gfm/)。
  """

var body: some View {
  Markdown(markdownString)
}

创建Markdown视图的一种更方便的方法是使用init(baseURL:imageBaseURL:content:)初始化器，它接受一个Markdown内容构建器，你可以在其中组合视图内容，既可以提供Markdown字符串，也可以使用表达性的领域特定语言。

var body: some View {
  Markdown {
    """
    ## 使用Markdown内容构建器
    使用Markdown字符串或表达性的领域特定语言
    来构建内容。
    """
    Heading(.level2) {
      "尝试MarkdownUI"
    }
    Paragraph {
      Strong("MarkdownUI")
      "是一个原生的SwiftUI Markdown渲染器，"
      "兼容"
      InlineLink(
        "GitHub Flavored Markdown规范",
        destination: URL(string: "https://github.github.com/gfm/")!
      )
      "。"
    }
  }
}

你也可以在模型层创建一个MarkdownContent值，然后通过将内容值传递给init(_:baseURL:imageBaseURL:)初始化器来创建Markdown视图。MarkdownContent值会预解析Markdown字符串，防止视图执行此步骤。

// 在模型层的某处
let content = MarkdownContent("你可以在[这里](https://spec.commonmark.org/dingus/)尝试**CommonMark**。")

// 稍后在视图层
var body: some View {
  Markdown(self.model.content)
}

样式化Markdown

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

Markdown {
  """
  你可以用`>`来引用文本。

  > 在狗之外，书是人类最好的朋友。在狗的
  > 内部太黑了，看不了书。

  – 格劳乔·马克思
  """
}

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

Markdown {
  """
  你可以用`>`来引用文本。

  > 在狗之外，书是人类最好的朋友。在狗的
  > 内部太黑了，看不了书。

  – 格劳乔·马克思
  """
}
.markdownTheme(.gitHub)

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

Markdown {
  """
  使用`git status`列出所有尚未提交的新文件或修改过的文件。
  """
}
.markdownTextStyle(\.code) {
  FontFamilyVariant(.monospaced)
  FontSize(.em(0.85))
  ForegroundColor(.purple)
  BackgroundColor(.purple.opacity(0.25))
}

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

Markdown {
  """
  你可以用`>`来引用文本。

  > 在狗之外，书是人类最好的朋友。在狗的
  > 内部太黑了，看不了书。

  – 格劳乔·马克思
  """
}
.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)
    }
    // 更多文本样式...
    .paragraph { configuration in
      configuration.label
        .relativeLineSpacing(.em(0.25))
        .markdownMargin(top: 0, bottom: 16)
    }
    .listItem { configuration in
      configuration.label
        .markdownMargin(top: .em(0.25))
    }
    // 更多块样式...
}

文档

Swift Package Index友好地托管了所有版本的在线文档，可在以下链接获取：

• main
• 2.1.0
• 2.0.2

相关内容

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

• SwiftUI中更好的Markdown渲染
• 用这个技巧释放SwiftUI中Markdown的力量！ 作者：@Rebeloper

演示

MarkdownUI还有一些其他技巧。你可以探索配套演示项目并发现其完整的功能集。

安装

将MarkdownUI添加到Swift包

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

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

将"MarkdownUI"作为你的可执行目标的依赖项包括进去：

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

最后，在你的源代码中添加import MarkdownUI。

将MarkdownUI添加到Xcode项目

1. 从文件菜单中，选择添加包...
2. 在搜索或输入包URL搜索框中输入https://github.com/gonzalezreal/swift-markdown-ui
3. 将MarkdownUI链接到你的应用程序目标