Rendering markdown formatted text to image

[metronome12]

Hi,

I'm wondering if it's possible to render the final output to an image? This would come in handy to provide the text rendering outside of an application.

I've attempted to do this in swift by rendering the View to image but this doesn't work as expected.

Is there an existing way to render the final output of the text render to an image?

And if I could make a suggestion it would be to have a asImage method on the MarkdownView.

[gonzalezreal]

Hi @metronome12,

Have you tried using the new ImageRenderer class? It is available on macOS 13 / iOS 16 and can do pretty cool stuff. For instance, Paul Hudson has a tutorial on rendering a PDF from a SwiftUI view, which might be helpful for your use case.

[metronome12]

Yeah tried that and it has the same result, the pdf is empty. I think it might be because the width and the height are set to zero for Markdown Views. When I render with a Text this the size is correct: [image: Screenshot 2023-02-25 at 11.37.35 AM.png] When I render a Markdown view the size is set to 0,0 and is incorrect: [image: Screenshot 2023-02-25 at 11.43.19 AM.png] And I've attempted to execute the render on an in memory Markdown view (already rendered to the screen) and the size is still 0, 0. I'm thinking that maybe the size is not being reported for the Markdown view properly? What I'm attempting to do is enable printing of the Markdown content as well as doing an image rendering of the view so that I can have an image representation of the formatted markdown. Thanks for looking into this! Cory

…

On Sat, Feb 25, 2023 at 12:03 AM Guille Gonzalez ***@***.***> wrote: Hi @metronome12 <https://github.com/metronome12>, Have you tried using the new ImageRenderer <https://developer.apple.com/documentation/swiftui/imagerenderer> class? It is available on macOS 13 / iOS 16 and can do pretty cool stuff. For instance, Paul Hudson has a tutorial on rendering a PDF from a SwiftUI view <https://www.hackingwithswift.com/quick-start/swiftui/how-to-render-a-swiftui-view-to-a-pdf>, which might be helpful for your use case. — Reply to this email directly, view it on GitHub <#190 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2TIWVMYCJZJTOQ6SYTSKDWZGVC7ANCNFSM6AAAAAAVHLUJ3I> . You are receiving this because you were mentioned.Message ID: <gonzalezreal/swift-markdown-ui/repo-discussions/190/comments/5106787@ github.com>

[gonzalezreal]

Which version of MarkdownUI are you using? Please consider that version 1.x is incompatible with the ImageRenderer, as internally, it uses an NS/UITextView. According to the docs, ImageRenderer does not render views provided by native platform frameworks (AppKit and UIKit).

I haven't tested it, but it should work fine with MarkdownUI 2.x, which only uses pure SwiftUI views.

[metronome12]

I'm using 2.0.1. It might be rendering correctly but the Image Renderer size is set to 0, 0. Is it possible that the size is being set to 0,0 in the Markdown class? ```swift *var* doc:String = """ You can quote text with a `>`. Outside of a dog, a book is man's best friend. Inside of a dog it's too dark to read. – Groucho Marx """ *let* renderer = ImageRenderer(content: Markdown(doc) ) l*et* url = URL.documentsDirectory.appending(path: "output.pdf") renderer.render { size, context *in* *var* box = CGRect(x: 0, y: 0, width: size.width, height: size. height) *guard* *let* pdf = CGContext(url *as* CFURL, mediaBox: &box, *nil*) *else* { *return* } pdf.beginPDFPage(*nil*) context(pdf) pdf.endPDFPage() pdf.closePDF() } ```

…

On Sun, Feb 26, 2023 at 11:05 AM Guille Gonzalez ***@***.***> wrote: Which version of MarkdownUI are you using? Please consider that version 1.x is incompatible with the ImageRenderer, as internally, it uses an NS/UITextView. According to the docs, ImageRenderer does not render views provided by native platform frameworks (AppKit and UIKit). I haven't tested it, but it should work fine with MarkdownUI 2.x, which only uses pure SwiftUI views. — Reply to this email directly, view it on GitHub <#190 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AA2TIWWQY4MIXVHD5BR5ZBLWZOLM5ANCNFSM6AAAAAAVHLUJ3I> . You are receiving this because you were mentioned.Message ID: <gonzalezreal/swift-markdown-ui/repo-discussions/190/comments/5115512@ github.com>

[gonzalezreal]

The problem may be that Markdown views render their contents asynchronously, so they report a 0,0 size at first. I will take a look when I have the time and search for other alternatives.

[metronome12]

Tried this but still see 0,0 for size:

let renderer = ImageRenderer(content: ZStack { GeometryReader { geometry in Markdown(doc) } } )

[gonzalezreal]

Hi @metronome12,

I found the problem; the fix is now on the main branch. I even added some sample code that uses ImageRenderer in the companion Demo app.

Please, be aware of the following ImageRenderer limitations:

• It does not work with views that render their content asynchronously
• It does not render views provided by native platform frameworks (AppKit and UIKit) such as ScrollView.

[metronome12]

Awesome! I'll check it out soon.

[metronome12]

Works great!