SwiftUIアプリでマークダウンテキストを表示する

この記事では、SwiftUIアプリ内でのマークダウン形式のテキストの表示について説明します。これは、コードに入力した文字列と、ユーザーが入力したテキストの両方に当てはまります。

使用可能なマークダウンフォーマット

現時点では、太字、イタリック体、リンク（リンクをクリックすると、Safariアプリが起動します）、コードのマークダウンが使用できます。

コーディングする文字列の中でマークダウンを使用

コードファイルの中の文字列に直接マークダウンフォーマットを含めることができます。

Text("You can use **bold text**, an *italic* text, a [link](apple.com), or `a piece of code`.")

テキストはマークダウンフォーマットで表示されます。

保存された文字列のマークダウンをレンダリングする

マークダウンテキストがコードに直接存在しない場合 (例えば、変数から、または保存された値から読み取られる場合)、マークダウンとしてレンダリングする必要がある。

拡張関数をStringに追加することができる。

extension String {
    func getAttributedString() -> AttributedString {
        do {
            let attributedString = try AttributedString(markdown: self)
            return attributedString
        } catch {
            print("Couldn't parse: \(error)")
        }
        return AttributedString("Error parsing markdown")
    }
}

そして、テキストをマークダウンで表示するためには：

Text(itemTextContent.getAttributedString())

SwiftでMarkdownエディターを作成する

これでユーザがマークダウン形式で入力すると、そのテキストがマークダウンとしてレンダリングされるMarkdownエディターを作成できます。

import SwiftUI

struct ContentView: View {
    
    @State private var userEnteredText: String = ""
    
    var body: some View {
        List {
            Section("Enter some text here") {
                TextEditor(text: $userEnteredText)
            }
            Text(userEnteredText.getAttributedString())
        }
    }
    
}

---

Twitter @MszPro

私の公開されているQiita記事のリストをカテゴリー別にご覧いただけます：