Is it possible to import Markdown text file to SwiftUI and display the text in a view?

Question

I was wondering if it is possible to import markdown files into your SwiftUI project (in Xcode) and then display the contents of the file inside of an SwiftUI view? It would be pretty neat if one have a lot of text to process and just import it by a simple method?

I've tried using:

import SwiftUI

struct ShowMarkdown: View {
    // Get the path to your markdown file.
    let filepath = Bundle.main.url(forResource: "filename", withExtension: "md")
    
    var body: some View {
        // Show the markdown.
        Text(try! AttributedString(contentsOf: filepath!))
    }
}

The problem with using above code is that for one thing it doesn't display the headers correctly. I want it to look like what you see in a preview of an simple Markdown file.

can you show us an example file you want to display but does not display well. — workingdog support Ukraine, Jan 23 '23 at 07:06
I Use the code you see down below with the following markdown code (just to test out): #Title ##Title2 BLA BLA and BLA ##Title3 ###Title4 — Alexander Johansson, Jan 23 '23 at 12:02
try using your code with, `*Title* **Title2** BLA BLA and BLA **Title3** **Title4**`, note the `*` not the `#`. Works for me. — workingdog support Ukraine, Jan 23 '23 at 12:30
Note, headings are not supported according to this post: https://stackoverflow.com/questions/70643384/how-to-render-markdown-headings-in-swiftui-attributedstring In other words, your code works but the headings will not be shown as desired. — workingdog support Ukraine, Jan 23 '23 at 12:50

score 1 · Accepted Answer · answered Jan 22 '23 at 18:49

1

Text views can display Markdown directly, but rather than initialise with a String variable, you'll need to use LocalizedStringKey…

struct ShowMarkdown: View {
    // Get the path to your markdown file.
    
    var text: LocalizedStringKey {
        let filepath = Bundle.main.url(forResource: "filename", withExtension: "md")!
         return LocalizedStringKey(try! String(contentsOf: filepath))
    }


    var body: some View {
        // Show the markdown.
        Text(text)
    }
}

answered Jan 22 '23 at 18:49

Ashley Mills

50,474
16
129
160

Unfortunately my program crash when using above code. I tried creating a simple view with only the above code and a new markdown file and it crashes... – Alexander Johansson Jan 23 '23 at 06:32
What crash are you seeing? Does the filename.md exist in your bundle? – Ashley Mills Jan 23 '23 at 08:56
It says "implicity unwrapped nil value in ShowMarkdown..." And the filename.md is in the same folder as the swiftUI file. Is there something silly that I'm forgetting or not seeing? – Alexander Johansson Jan 23 '23 at 10:26
1

Make sure the filename.md is added to your target – Ashley Mills Jan 23 '23 at 14:06

Is it possible to import Markdown text file to SwiftUI and display the text in a view?

1 Answers1