SwiftUI 框架

在 SwiftUI 使用 Markdown 輕鬆格式化文本

iOS 15 SDK 引入了一些重要功能,像是 AsyncImage 和 searchable 等,除此之外,還有一些可以簡化 iOS App 開發的小更新。在這篇教學文章中,讓我們一起來試試在 SwiftUI 的 Text 視圖中使用 Markdown。
在 SwiftUI 使用 Markdown 輕鬆格式化文本
在 SwiftUI 使用 Markdown 輕鬆格式化文本
In: SwiftUI 框架

iOS 15 SDK 引入了一些重要功能,像是 AsyncImagesearchable 等,除此之外,還有一些可以簡化 iOS App 開發的小更新。在這篇教學文章中,讓我們一起來試試在 SwiftUI 的 Text 視圖中使用 Markdown。

什麼是 Markdown

相信大家都有用過 Markdown,不過為免有人不知道什麼是 Markdown,讓我們先來簡單介紹一下。Markdown 由 John Gruber 建立,是一種在純文本檔案添加格式的輕量級標記式語言。最重要的是,Markdown 讓我們可以輕鬆地將格式化文本轉換為 HTML 網頁(或其他類型的檔案)。在過去這些年來,我都是使用 Markdown 來編寫我的編程書籍。由於它是純文本性質,我們不需要任何特殊工具來編寫 Markdown,一個純文本編輯器就足夠了。

Markdown 非常易學和易用,讓我們來看看幾個例子。如果我們想要將文本設置為粗體,只需要在文本兩邊加上兩個星號 (**) 就可以了:

**this text is bold**

同樣地,如果我們想要將文本設置為斜體,可以在文本兩邊加上一個星號:

*this text is italic*

如果想在文本上添加刪除線,就可以這樣做:

~This text is removed~

要把文本設置為標題 (heading),我們可以這樣編寫 Markdown 語法:

# Heading 1 (Largest)
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6 (Smallest)

要突出一個 Command 或一行程式碼,我們可以在文本兩邊加上一個反引號 (backtick):

To show all processess running on macOS, you can type `ps aux` in Terminal.

要添加連結也非常簡單,我們可以將在連結文本兩邊加上方括號 ([]),然後在連結兩邊加上括號:

The tutorial is provided by [AppCoda](https://www.appcoda.com).

如果文本添加了 HTML,就會以超連結顯示。

以上只是 Markdown 語法的幾個例子,如果你想了解更多,可以參考 GitHub 上的這篇文章

在 SwiftUI 使用 Markdown

相信大家讀到這裡,應該都對 Markdown 有一些了解。接下來,我們就看看如何在 SwiftUI 開發中使用 Markdown 吧!從 iOS 15 開始,SwiftUI 內置支援這種標記語言,我們可以在 Text 視圖使用 Markdown,輕鬆格式化文本。

我們只需要把 Text 視圖的文本,以 Markdown 語法傳遞就可以了!讓我們看看以下的範例程式碼:

VStack(alignment: .leading) {
    Text("**Text in bold**")
    Text("*Text in italic*")
    Text("~This text is crossed out~")
    Text("`This line of code`")
    Text("You can [click this link](https://www.appcoda.com) to visit the website.")
}

你可以試試把程式碼放到 SwiftUI 專案中,Xcode 會自動格式化文本。

swiftui-markdown-support

另外,我們也可以使用 Markdown 格式化一段文本:

swiftui-markdown-render-text

使用 AttributedString

iOS 15 中的 AttributedString 就是 Swift 版本的 NSAttributedString,它也內置支援 Markdown。我們可以這樣編寫程式碼,來在 Markdown 中創建 Attributed String:

do {
    var text = var text = try AttributedString(markdown: "**This text is bold**")
} catch {
    print("Failed to create the attributed text")
}

此外,我們可以利用自己喜歉的樣式,搭配 Markdown 來應用於文本。以下的例子就用不同顏色來突出文本:

var attributedString: AttributedString = {
    do {
        var text = try AttributedString(markdown: "`SwiftUI` has evolved so much in these two years. **Apple has packed even more features and brought more UI components to the `SwiftUI` framework**, which comes alongside with *Xcode 13*. It just takes UI development on iOS, iPadOS, and macOS to the **next level**.")

        if let range = text.range(of: "Apple") {
            text[range].backgroundColor = .yellow
        }

        if let range = text.range(of: "iPadOS") {
            text[range].backgroundColor = .purple
            text[range].foregroundColor = .white
        }

        return text

    } catch {
        return ""
    }
}()

SwiftUI 的文本組件也內置支援 AttributedString,我們可以簡單地將其傳遞給 Text視圖進行渲染。

swiftui-attributed-text

現時的限制

現時,最新版本的 Swift 還未能支援所有 Markdown 語法,像是標題、編號清單 (numbered list)、和圖像等都無法支援。希望 Apple 會在 SwiftUI 未來的更新中加以改善吧!

譯者簡介:Kelly Chan-AppCoda 編輯小姐。

作者
Simon Ng
軟體工程師,AppCoda 創辦人。著有《iOS 15 App 程式設計實戰心法》、《iOS 15 App程式設計進階攻略》以及《精通SwiftUI》。曾任職於HSBC, FedEx等跨國企業,專責軟體開發、系統設計。2012年創立AppCoda技術部落格,定期發表iOS程式教學文章。現時專注發展AppCoda業務,致力於iOS程式教學、產品設計及開發。你可以到推特與我聯絡。
評論
很好! 你已成功註冊。
歡迎回來! 你已成功登入。
你已成功訂閱 AppCoda 中文版 電子報。
你的連結已失效。
成功! 請檢查你的電子郵件以獲取用於登入的連結。
好! 你的付費資料已更新。
你的付費方式並未更新。