Is there a way to specify horizontal margin?

[mergesort]

I'm creating a Reader Mode for one of my apps, and really love how this library has enabled me to build a highly customizable screen for rendering a markdown variant of webpages.

I have a very basic set up right now, which looks something like this.

truct ReaderScreen: View {
    let article: MarkdownWebpage

    public init(article: MarkdownWebpage) {
        self.article = article
    }

    public var body: some View {
        ScrollView {
            Markdown {
                MarkdownContent("# " + article.title)
                MarkdownContent(article.urlString)
                MarkdownContent(article.content)
            }
            .markdownTheme(.sepia)
        }
    }
}

The output of that code looks like this, with the sepia theme applied from edge to edge.

I don't want the text to flow from edge to edge, but I would like for the entire background to be colored sepia. To address this I could add a .padding(16.0) modifier before applying .markdownTheme(.sepia), but then that leaves padding that takes on the View's default background color since what this actually does is make the Markdown block smaller.

While I can add horizontal padding to each individual Theme style component, I was wondering if there's a way to apply margin or padding to the entire Markdown structure. The solution I'm looking for is to be able to add add padding to the entire Markdown block, so I don't have to add padding to all of the theme's elements. Is that possible and something I've overlooked, and if not, would it be possible to add such functionality?

Thank you so much!

[gonzalezreal]

Hi @mergesort,

Thank you for using MarkdownUI ❤️.

It might not be ideal, but applying a padding to the Markdown view is the only solution at the moment. To get the text background color fron the sepia theme you can use .backgroundColor(Theme.sepia.textBackgroundColor).

The demo project uses the same approach, as the bundled .github theme has a custom background color as well:

swift-markdown-ui/Examples/Demo/Demo/DemoView.swift

Line 74 in a9c7615

.listRowBackground(self.themeOption.theme.textBackgroundColor)

Let me know if that fixes the issue.

[mergesort]

It's not perfect but having that suggestion is really helpful, I was able to implement it this way in my app as well. Thank you so much for the suggestion, and the great library @gonzalezreal!