New in SwiftUI 3: Markdown Support in SwiftUI 3, iOS 15

DevTechie Inc

Apr 6, 2022

SwiftUI 3 introduced another great feature, native markdown support 🙌

Let’s try with a simple example:

struct SimpleMarkdownExample: View {
    
    var body: some View {
        Text("**DevTechie** Tutorials")
    }
}

This will output as

DevTechie Tutorials

Not all markdown syntax is supported yet but many are. Below is an example of what’s supported

struct SupportedMarkdownSyntax: View {
    var body: some View {
        VStack {
            Group {
                // Bold: **
                Text("**Bold Text**")
                // Italic: *
                Text("*Italic Text*")
                // Bold: __
                Text("__Bold Text__")
                // Bold Italic: ***
                Text("***Bold_italic Text***")
                
            }
            
            Group {
                // Code: `code`
                Text("`Text(\"DevTechie\")`")
                // Link: [text](link)
                Text("[Visit DevTechie](https://www.DevTechie.com)")
                //Strikethrough: ~Text~
                Text("~Strikethrough~ Text")
            }
        }
    }
}

Images aren’t supported by yet.

This is how output will look like:

Let’s take another example. We will build business card view as shown below and use markdown for some of the text formatting:

The code will look like this:

struct BusinessCardView: View {
    
    private var hBar: some View {
        ZStack(alignment: .leading) {
            RoundedRectangle(cornerRadius: 5)
                .fill(.gray)
                .frame(height: 2)
            RoundedRectangle(cornerRadius: 5)
                .fill(.orange)
                .frame(width: 100)
                
        }.shadow(color: .orange, radius: 2, x: 1, y: 0)
    }
    
    var body: some View {
        ZStack {
            Rectangle()
                .fill(Color.orange)
            
            Capsule()
                .fill(.black)
                .frame(width: 500)
                .offset(x: -100)
            
            ZStack {
                Circle()
                    .fill(.black)
                    .frame(maxHeight: 250)
                    
                    .clipped()
                    .shadow(color: .gray.opacity(0.8), radius: 40, x: -10, y: 0)
                VStack {
                    Text("**DevTechie**")
                        .font(.largeTitle)
                    hBar
                        .frame(width: 200, height: 4)
                    Text("*[DevTechie@gmail.com](DevTechie@gmail.com)*")
                    Text("*[www.DevTechie.com](https://www.DevTechie.com)*")
                }
                    .foregroundColor(.white)
            }.offset(x: 70)
            
            Text("`Learn By Doing`")
                .foregroundColor(.white)
                .rotationEffect(.degrees(-90))
                .offset(x: -100)
            
        }
        .padding()
        .frame(maxHeight: 300)
        .clipped()
        .shadow(color: .gray, radius: 5, x: 0, y: 0)
    }}

With that, we have reached the end of this article. Thank you once again for reading, if you liked it, don’t forget to subscribe our newsletter.