LoginSignup
15

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-04-09

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

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

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

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

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

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

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

スクリーンショット 2022-04-09 14.16.05.png

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

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

拡張関数を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エディターを作成できます。

simple-markdown-editor.gif

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())
        }
    }
    
}

:relaxed: Twitter @MszPro

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15