How can I line-wrap code blocks rather than having to scroll it.

[NunoLemos101]

So basically I have built an application natively for Android and here is a screenshot of how the Markdown is rendered in Android

Now I'm trying to render that same markdown (it comes from a backend) in SwiftUI and the code block doesn't line-wrap. Instead it forces the user to scroll horizontally.

I would like to know if It's possible to achieve this result in SwiftUI. Make the code blocks line-wrap.

Thank you,

[gonzalezreal]

Hi @NunoLemos101,

You can use the markdownBlockStyle(_:body:) modifier to replace a specific block style on the current Theme.

To achieve the desired effect, you should replace the current codeBlock style with a new one that does not use a ScrollView. Here is an example:

Markdown("...")
  .markdownBlockStyle(\.codeBlock) { configuration in
    configuration.label
      .fixedSize(horizontal: false, vertical: true)
      .relativeLineSpacing(.em(0.225))
      .markdownTextStyle {
        FontFamilyVariant(.monospaced)
        FontSize(.em(0.85))
      }
      .padding(16)
      .background(Color(.secondarySystemBackground))
      .clipShape(RoundedRectangle(cornerRadius: 6))
      .markdownMargin(top: 0, bottom: 16)
  }

[NunoLemos101]

Hi @gonzalezreal

I managed to do it using ScrollView(.vertical) but your approach is certainly better.

Thank you
Nuno Lemos