SwiftUI에서 Markdown(마크다운) 표현하기

요즘 텍스트 데이터는 마크다운과 이모지의 향연이다.

당연히 해당 텍스트 데이터를 그대로 잘 표현해야 한다. 그럼 SwiftUI는 알아서 잘 표현 할 것인가?

SwiftUI의 마크다운 표현 가능 여부를 알아보자.

 

후보#1. Text

- 별도의 라이브러리 설치없이 사용가능하다

- iOS 15부터 가능하다

import SwiftUI

struct MarkdownTextView: View {
    let markdownString = """
    # 제목 1
    ## 제목 2
    **굵은 글씨**, *기울임*, `코드`
    - 리스트 아이템 1
    - 리스트 아이템 2
    [링크](https://www.apple.com)
    """

    var body: some View {
        ScrollView {
            Text(markdownString)
                .padding()
                // .font(.body) 등으로 전체 폰트 조정 가능
        }
    }
}

[Text가 표현 가능한 Markdown]

 

• 헤딩 (# ~ ######)
• 굵은 글씨 (**굵은 글씨**)
• 기울임 글씨 (*기울임*)
• 취소선 (~~취소선~~)
• 인라인 코드 (`코드`)
• 링크 ([텍스트](URL))
• 순서 없는 리스트 (-, *, +)
• 순서 있는 리스트 (1., 2., ...)
• 인용문 (> 인용문)
• 수평선 (---, ***)
• 줄바꿈 (문장 끝에 두 칸 띄우기 또는 빈 줄)

 

[Text가 표현 못하는 Markdown]

 

• 테이블 (| 헤더 | 헤더 |)
• 이미지 삽입 ()
• 체크박스 리스트 (- [ ], - [x])
• 각주 ([^1], [1]: 설명)
• 정의 목록 (definition lists)
• HTML 태그 임베디드 (<div>…</div>)
• 코드 블록 문법 강조(하이라이팅)
• 블록 인용문 스타일 커스터마이징 (테두리·배경 등)

뭐 왠만한 것은 다 표현이 가능한듯 하다. 특별히 텍스트 편집기를 만들지 않는다면 Text로도 충분할것 같다

 

 

후보#2. MarkdownUI

- 외부 라이브러리임

- 따로 설치해야함: Xcode 메뉴 File > Add Packages > https://github.com/gonzalezreal/MarkdownUI.git 추가

import SwiftUI
import MarkdownUI

struct MarkdownUIPreview: View {
    let markdown = """
    # MarkdownUI 예제
    - ✅ 체크박스
    - 🚀 이모지
    """

    var body: some View {
        ScrollView {
            Markdown(markdown)
                .markdownTheme(.gitHub)          // GitHub 스타일
                .markdownStyle(
                    DefaultMarkdownStyle(
                        font: .system(size: 16),
                        foregroundColor: .primary
                    )
                )
                .padding()
        }
    }
}

 

- text보다 상대적으로 다양한 표현 가능하고, 테마/스타일 옵션 사용 가능

- 표도 표현 가능함

 

 

결론. 우선 Text로도 왠만한것은 커버된다. Text쓰세용~ :)