Why aren't Markdown code blocks rendering in my exported PDF, but they appear correctly in the live SwiftUI view?

[jaredcassoutt]

Hey everyone, I have a SwiftUI View and ViewModel setup where users can live-edit Markdown and preview it using MarkdownUI. I'm using ImageRenderer to export this content as a PDF. The live preview displays code blocks correctly, but in the exported PDF, the code blocks don’t appear at all — it’s like they're skipped or stripped out.

Has anyone run into this issue when using MarkdownUI with ImageRenderer or know why code blocks might not render in the PDF output?

Any help would be appreciated!

import MarkdownUI

struct EditorView: View, ModuleRouter {
    enum FocusField: Hashable {
        case field
    }

    var appRouter: AppRouter { AppRouter.shared }

    @ObservedObject var viewModel: EditorViewModel
    @FocusState private var focusedField: FocusField?

    var body: some View {
        VStack(spacing: 0) {
            HStack {
                Button {
                    appRouter.pop()
                } label: {
                    Image(systemName: "chevron.left")
                        .font(.headline)
                        .fontWeight(.bold)
                        .foregroundColor(.primary)
                        .padding(12)
                        .background(.ultraThickMaterial)
                        .clipShape(Circle())
                }
                .focusEffectDisabled()
                .buttonStyle(.borderless)
                .padding([.bottom, .horizontal])

                Spacer()
            }
            HStack(spacing: 0) {
                VStack(alignment: .leading, spacing: 0) {
                    ZStack {
                        RoundedRectangle(cornerRadius: 20)
                            .fill(.ultraThickMaterial)

                        TextEditor(text: $viewModel.markdownContent)
                            .padding(10)
                            .scrollContentBackground(.hidden)
                            .backgroundStyle(.clear)
                            .font(.body)
                            .focused($focusedField, equals: .field)
                            .onAppear {
                                focusedField = .field
                            }
                    }
                    .padding(.horizontal)
                }

                Divider()

                ZStack {
                    RoundedRectangle(cornerRadius: 20)
                        .fill(.ultraThickMaterial)

                    ScrollView {
                        Markdown(viewModel.markdownContent)
                            .markdownTheme(.docC)
                            .padding()
                    }
                    .frame(minWidth: 300)
                }
                .padding(.horizontal)
            }

            HStack {
                Spacer()
                Button("Save  →") {
                    viewModel.saveAsPDF()
                }
                .buttonStyle(CapsuleButtonStyle(backgroundColor: .accentColor))
                .padding()
                .focusEffectDisabled()
            }
        }
        .navigationBarBackButtonHidden(true)
    }
}


class EditorViewModel: ObservableObject {
    struct Constants {
        static let pdfPageWidth:  CGFloat = 595
        static let pdfPageHeight: CGFloat = 842
        static let margin: CGFloat = 50
    }

    @Published var markdownContent: String = ""

    @MainActor
    func saveAsPDF() {
        let contentWidth  = Constants.pdfPageWidth  - 2 * Constants.margin
        let contentHeight = Constants.pdfPageHeight - 2 * Constants.margin

        let renderedMarkdown = Markdown(markdownContent)
            .markdownTheme(.docC)
            .frame(width: contentWidth)

        let renderer = ImageRenderer(content: renderedMarkdown)
        renderer.scale = 3.0

        let savePanel = NSSavePanel()
        savePanel.title = "Save Rendered Markdown as PDF"
        savePanel.nameFieldStringValue = "Markdown.pdf"
        savePanel.allowedContentTypes = [.pdf]

        if savePanel.runModal() == .OK, let saveURL = savePanel.url {
            let url = saveURL as CFURL

            renderer.render { size, drawContext in
                // Compute total pages needed
                let totalPages = Int( ceil(size.height / contentHeight) )

                var mediaBox = CGRect(
                    x: 0, y: 0,
                    width:  Constants.pdfPageWidth,
                    height: Constants.pdfPageHeight
                )
                guard let pdfContext = CGContext(url, mediaBox: &mediaBox, nil) else {
                    print("Failed to create PDF context")
                    return
                }

                for pageIndex in 0..<totalPages {
                    pdfContext.beginPDFPage(nil)
                    pdfContext.saveGState()

                    // Apply margin translation
                    pdfContext.translateBy(x: Constants.margin, y: Constants.margin)

                    // Clip to only draw the drawable area
                    pdfContext.clip(to: CGRect(
                        x: 0, y: 0,
                        width:  contentWidth,
                        height: contentHeight
                    ))

                    // Compute the offset so that:
                    // - When pageIndex == 0, offsetY = size.height - contentHeight (bottom slice)
                    // - When pageIndex == totalPages - 1, offsetY = 0 (top slice)
                    let offsetY = size.height - CGFloat(pageIndex + 1) * contentHeight
                    pdfContext.translateBy(x: 0, y: -offsetY)

                    // Draw content into the PDF context
                    drawContext(pdfContext)

                    pdfContext.restoreGState()
                    pdfContext.endPDFPage()
                }

                pdfContext.closePDF()
            }
        }
    }
}